How to capture a frame from HTML Canvas and display it on Bootstrap modal ?
Last Updated :
19 Sep, 2022
In this article, we will see how to display canvas graphics into a bootstrap modal, along with understanding the basic implementation through the examples. Here, we will design a simple modal using bootstrap and will create some graphics in the selected canvas, and then display them on the modal.
The HTML “canvas” element is used to draw graphics via JavaScript. The “canvas” element is only a container for graphics. One must use JavaScript to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images. The canvas would be a rectangular area on an HTML page. By default, a canvas has no border and no content.
Bootstrap Modal is the dialog box that is used to highlight content over the web page. These are positioned over all the other components of a web page.
Structure of the Bootstrap modal: A modal consists of three parts, which are described below:
- modal header: This is the top portion of the modal. To make this, we use a class called modal-header. It consists of a title and a close button.
Example: This code shows the Bootstrap Model Header.
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close"
data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
- modal body: This is where the required contents are displayed. To make this we use a class called modal-body.
Example: This part will contain the main design logic that will render the main content portion.
<div class="modal-body">
GeeksforGeeks
</div>
- modal footer: The bottom portion of the modal is the footer. To make this we use a class called modal-footer.
Example: This portion contains the basic footer elements ie., company details, portfolios, address, copyright details, etc.
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Close</button>
<button type="button"
class="btn btn-primary">Save changes</button>
</div>
Approach: The following approach will be used to implement the task:
- Create a modal using bootstrap.
- Create a canvas element with some drawings.
- Convert the canvas content to DATAURL.
- Add <img> tag to the body of the modal and assign the DATAURL.
- With a click of the modal button, the canvas will be displayed over the modal.
Create a bootstrap modal: To create a modal initially we need to add the CDN of bootstrap to the HTML page. You can find the link on the bootstrap site. After, you can build the modal as followed in the below example,
Example 1: In this example, we have a modal that is vertically centered and large in size, it displays “GeeksforGeeks”.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>
Capturing a frame from
HTML Canvas display it
on Bootstrap modal
</title>
<link rel="stylesheet" href=
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous" />
integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous">
</script>
<style>
h1 {
color: green;
}
body {
padding: 5px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>
How to capture a frame from HTML Canvas
and display it on Bootstrap modal?
</h3>
<button type="button" class="btn btn-primary"
data-toggle="modal" data-target="#exampleModal">
Open Modal
</button>
<div class="modal fade" id="exampleModal"
tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog
modal-dialog-centered
modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"
id="exampleModalLabel">
GeeksforGeeks
</h5>
<button type="button" class="close"
data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
GeeksforGeeks - A Computer
Science Portal for geeks!
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-secondary"
data-dismiss="modal">
Close
</button>
<button type="button"
class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Create a canvas element with some drawings: Use the <canvas> tag to create a canvas and draw some shapes on it with javascript as shown in the below example.
Example 2: In this example, we are creating the canvas by drawing a filled circle.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>
Capturing a frame from
HTML Canvas display it
on Bootstrap modal
</title>
<link rel="stylesheet" href=
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous" />
integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous">
</script>
<style>
h1 {
color: green;
}
body {
padding: 5px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>
How to capture a frame from HTML
Canvas and display it on Bootstrap modal?
</h3>
<canvas id="mycanvas"></canvas>
<button type="button" class="btn btn-primary"
data-toggle="modal"
data-target="#exampleModal">
Open Modal
</button>
<div class="modal fade" id="exampleModal"
tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog
modal-dialog-centered
modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"
id="exampleModalLabel">
GeeksforGeeks
</h5>
<button type="button" class="close"
data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">
×
</span>
</button>
</div>
<div class="modal-body">
GeeksforGeeks - A Computer
Science Portal for geeks!
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-secondary"
data-dismiss="modal">
Close
</button>
<button type="button"
class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
<script>
var canvas = document.getElementById('mycanvas');
var downloadlink =
document.getElementById('downloadlink');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = 'green';
ctx.lineWidth = 4;
ctx.beginPath();
ctx.arc(100, 75, 60, 0, Math.PI * 2);
ctx.fill();
</script>
</body>
</html>
|
Output:
Convert the canvas content to DATAURL: Using toDataURL method from the canvas API to convert the drawn shape of the canvas into a DATAURL.
Syntax:
canvas.toDataURL("image/png");
Add <img> tag to the body of the modal and change the source of the image to captured dataurl.
Example 3: Here is the full code displaying the canvas with the filled circle on the bootstrap modal. In this code, I have used internal scripting to add javascript code. You can paste this code into your editor to understand it well.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
Capturing a frame from
HTML Canvas display it
on Bootstrap modal
</title>
<link rel="stylesheet" href=
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous" />
<script src=
integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous">
</script>
<style>
h1 {
color: green;
}
body {
padding: 5px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>
How to capture a frame from HTML Canvas
and display it on Bootstrap modal?
</h3>
<canvas id="mycanvas"></canvas>
<button type="button"
class="btn btn-primary"
data-toggle="modal"
data-target="#exampleModal">
Open Modal
</button>
<div class="modal fade"
id="exampleModal"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog
modal-dialog-centered
modal-lg"
role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"
id="exampleModalLabel">GeeksforGeeks</h5>
<button type="button"
class="close"
data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img id="img"
src="#"
width="100%"
height="100%" />
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-secondary"
data-dismiss="modal">Close</button>
<button type="button"
class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
<script>
var canvas = document.getElementById("mycanvas");
var img = document.getElementById("img");
var ctx = canvas.getContext("2d");
ctx.strokeStyle = "green";
ctx.lineWidth = 4;
ctx.beginPath();
ctx.arc(100, 75, 60, 0, Math.PI * 2);
ctx.fill();
var imagedata = canvas.toDataURL("image/png");
img.src = imagedata;
</script>
</html>
|
Output: The below picture is the final result of displaying the captured frame of canvas on modal.
Share your thoughts in the comments
Please Login to comment...