HTML Canvas Graphics – Tutorials Art

For drawing the HTML Canvas Graphics on webpage HTML <canvas> element is used along with this JavaScript is used as well. Basically canvas is rectangular area in webpage. By default it has no content and border.

HTML Canvas Graphics: Syntax

<canvas id="canvas1" width="400" height="200"></canvas>

Note: The id attribute should be given so that it can be further used to refer in script. For defining size of canvas width and height attribute is used.

<canvas id="canvas1" width="400" height="200" style="border:1px solid #000000;">
</canvas>

Canvas using JavaScript

To draw anything on canvas, you need to add JavaScript.

<canvas id="canvas1" width="200" height="100" style="border:1px solid #000000;">
</canvas>

<script>
var cn = document.getElementById("canvas1");
var ctx = cn.getContext("2d");
ctx.beginPath();
ctx.arc(100,50,40,0,2*Math.PI);
ctx.stroke();
</script>

Stroke Text

<h2>Canvas Stroke Text Example</h2>

<canvas id="canvas1" width="200" height="100" style="border:1px solid #000000;">
</canvas>

<script>
var cn = document.getElementById("canvas1");
var ctx = cn.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",20,60);
</script>

Note: For plain text you can simply use fillText function in place of strokeText.

Visit HTML SVG for vector graphics.