In this tutorial we are going to see how to create and add an HTML5 Canvas element and apply style dynamically using javascript. We are going to use “createElement” method of document class to create HTML5 Canvas element dynamically.
Tutorial difficulty:
- Basic Users
Related HTML5 tutorials:
Dynamically create HTML5 Canvas Element:
We are going to dynamically create html5 canvas element using javascript. For this we have to use “createElement()” method of document class.
var canv = document.createElement("canvas");
canv.setAttribute("id", "canvasID");
document.body.appendChild(canv);
Here we have created element name “canvas” and setting the id name as “canvasID”, then adding the created canvas element to the document body.
Code to create Canvas:
<!doctype HTML>
<html>
<head>
<title>Create HTML5 Canvas using Javascript</title>
<script type="text/javascript">
function init(canvas) {
var canv = document.createElement("canvas");
canv.setAttribute("id", "canvasID");
document.body.appendChild(canv);
}
</script>
</head>
<body onLoad="init()">
</body>
</html>
Style dynamically create HTML5 Canvas:
Let us add border, width, height css style and position style to the canvas using javascript.
var canv = document.createElement("canvas");
canv.setAttribute("id", "canvasID");
canv.width = 400;
canv.height = 400;
canv.style.position = "absolute";
canv.style.border = "1px solid";
document.body.appendChild(canv);
Entire code for styling HTML5 canvas:
<!doctype HTML>
<html>
<head>
<title>Create HTML5 Canvas using Javascript</title>
<script type="text/javascript">
function init(canvas) {
var canv = document.createElement("canvas");
canv.setAttribute("id", "canvasID");
canv.width = 400;
canv.height = 400;
canv.style.position = "absolute";
canv.style.border = "1px solid";
document.body.appendChild(canv);
}
</script>
</head>
<body onLoad="init()">
</body>
</html>
Draw a shape dynamically on HTML5 Canvas:
To draw any shape on html5 canvas we need to get the canvas handle first. we can acheive that using getContext(’2d’) method of canvas Object.
<!doctype HTML>
<html>
<head>
<title>Create HTML5 Canvas using Javascript</title>
<script type="text/javascript">
function init(canvas) {
var canv = document.createElement("canvas");
canv.setAttribute("id", "canvasID");
canv.width = 400;
canv.height = 400;
canv.style.position = "absolute";
canv.style.border = "1px solid";
document.body.appendChild(canv);
var ctx = canv.getContext('2d');
ctx.beginPath();
ctx.rect( 100, 100, 200, 200);
ctx.fillStyle = 'yellow';
ctx.fill();
ctx.lineWidth = 7;
ctx.strokeStyle = 'black';
ctx.stroke();
}
</script>
</head>
<body onLoad="init()">
</body>
</html>
Conclusion:
In this tutorial we have seen how to create html5 canvas element dynamically using javascript, style and draw on it.
Related posts: