View video tutorial

HTML <canvas> Tag

HTML

HTML <canvas> element is used to draw graphics and animations using script.

HTML <canvas> Tag


HTML <canvas> element with either the canvas scripting API or the WebGL API is used for drawing graphics and animations.

Element Attributes

Attribute Value Description
height pixels Specifies the height of the canvas. The default value is 150 pixels.
disabled pixels Specifies the width of the canvas. The default value is 300 pixels.

Global attributes

Global attributes may be applied on all elements, although some elements may have no effect on them.

<accesskey>, <class>, <contenteditable>, <contextmenu>, <data-*>, <dir>, <draggable>, <dropzone>, <hidden>, <id>, <lang>, <spellcheck>, <style>, <tabindex>, <title>, <translate>.

Learning with HTML Editor "Try it Now"

You can edit the HTML code and view the result using online editor.

Example

<h2>HTML Canvas Circle Example</h2>
<canvas id="myCanvas3" width="200" height="100" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML canvas tag.</canvas>
<script>
    var c = document.getElementById("myCanvas3");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(95, 50, 40, 0, 2 * Math.PI);
    ctx.stroke();
</script>
Try it Now »

Click on the "Try it Now" button to see how it works.


Sample Code

Copy each file contents and paste it to your own project and run to see the final output

Example

<canvas id="myCanvas3" width="400" height="400" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML canvas tag.</canvas>
<script>
    var c = document.getElementById("myCanvas3");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(95, 50, 40, 0, 2 * Math.PI);
    ctx.globalAlpha = 0.2;
    ctx.fillStyle = 'blue';
    ctx.fill();
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(120, 75, 40, 0, 2 * Math.PI);
    ctx.globalAlpha = 0.2;
    ctx.fillStyle = 'green';
    ctx.fill();
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(150, 100, 40, 0, 2 * Math.PI);
    ctx.globalAlpha = 0.2;
    ctx.fillStyle = 'red';
    ctx.fill();
    ctx.stroke();
</script>
Try it Now »

Click on the "Try it Now" button to see how it works.