View video tutorial

HTML Canvas

HTML

The HTML <canvas> element is used to draw graphics using JavaScript.

HTML <canvas> Tag.


Canvas element is a container for graphics to show on web page.

JavaScript is used to actually draw the image on the canvas.

Canvas create bitmap images for the graphics and can compromise quality when zooming, So it differs form SVG.

Fallback text is used to notify user if canvas is not supported by the browser.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
    Your browser does not support the HTML canvas tag.
</canvas>

Canvas Container

Your browser does not support the HTML canvas tag.

Learning with HTML Editor "Try it Now"

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

Example

<h2>HTML Canvas Example</h2>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
    Your browser does not support the HTML canvas tag.
</canvas>
Try it Now »

Click on the "See output" button to see how it works.


Canvas Draw a Line

Your browser does not support the HTML canvas tag.

Example

    <h2>HTML Canvas Line Example</h2>

    <canvas id="myCanvas2" width="200" height="100" style="border:1px solid #d3d3d3;">
        Your browser does not support the HTML canvas tag.</canvas>

    <script>
        var c = document.getElementById("myCanvas2");
        var ctx = c.getContext("2d");
        ctx.moveTo(0, 0);
        ctx.lineTo(200, 100);
        ctx.stroke();
    </script>
Try it Now »

Click on the "See output" button to see how it works.


Canvas Draw a Circle

Your browser does not support the HTML canvas tag.

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 "See output" button to see how it works.


Canvas Draw Linear Gradient

Your browser does not support the HTML canvas tag.

Example

<h2>HTML Canvas Linear Gradient Example</h2>

<canvas id="myCanvas4" width="200" height="100" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML canvas tag.</canvas>

<script>
    var c = document.getElementById("myCanvas4");
    var ctx = c.getContext("2d");
    // Create gradient
    var grd = ctx.createLinearGradient(0, 0, 200, 0);
    grd.addColorStop(0, "red");
    grd.addColorStop(1, "white");
    // Fill with gradient
    ctx.fillStyle = grd;
    ctx.fillRect(10, 10, 150, 80);
</script>
Try it Now »

Click on the "See output" button to see how it works.


Canvas Draw Circular Gradient

Your browser does not support the HTML canvas tag.

Example

<h2>HTML Canvas Circular Gradient Example</h2>

<canvas id="myCanvas5" width="200" height="100" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML canvas tag.</canvas>

<script>
    var c = document.getElementById("myCanvas5");
    var ctx = c.getContext("2d");

    // Create gradient
    var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
    grd.addColorStop(0, "red");
    grd.addColorStop(1, "white");

    // Fill with gradient
    ctx.fillStyle = grd;
    ctx.fillRect(10, 10, 150, 80);
</script>
Try it Now »

Click on the "See output" button to see how it works.


Canvas Draw Text

Your browser does not support the HTML canvas tag.

Example

<h2>HTML Canvas Draw Text Example</h2>

<canvas id="myCanvas6" width="200" height="100" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML canvas tag.</canvas>

<script>
    var c = document.getElementById("myCanvas6");
    var ctx = c.getContext("2d");
    ctx.font = "30px Arial";
    ctx.fillText("Hello World", 10, 50);
</script>
Try it Now »

Click on the "See output" button to see how it works.