HTML | Canvas Basics

What is HTML Canvas?
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.

Example : The canvas would be a rectangular area on an HTML page. By default, a canvas has no border and no content. An id attribute has been specified to refer it in a script, and a width and height attribute to define the size of the canvas. The style attribute is used to add a border.

INPUT :



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<body>
  
<canvas id="myCanvas" width="400" height="200" 
style="border:2px solid #000000;">
</canvas>
  
</body>
</html>

chevron_right


OUTPUT :

Let’s see some shapes that can be drawn using Canvas :

  • Drawing A Circle

    INPUT :

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <body>
      
    <canvas id="myCanvas" width="400" height="200 style
    ="border:2px solid #d3d3d3;">
      
    <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(200,100,50,0,2*Math.PI);
    ctx.stroke();
    </script
      
    </body>
    </html>

    chevron_right

    
    

    OUTPUT :

  • Drawing a Text

    INPUT :

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <body>
      
    <canvas id="myCanvas" width="600" height="200" 
    style="border:1px solid #d3d3d3;">
      
    <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.font = "30px Arial";
    ctx.fillText("GeeksForGeeks",170,50);
    </script>
      
    </body>
    </html>

    chevron_right

    
    

    OUTPUT :

  • Drawing Linear Gradient

    INPUT :

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <body>
      
    <canvas id="myCanvas" width="400" height="200" style="border:2px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>
      
    <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var grd = ctx.createLinearGradient(0,0,200,0);
    grd.addColorStop(0,"yellow");
    grd.addColorStop(1,"grey");
    ctx.fillStyle = grd;
    ctx.fillRect(50,50,300,80);
    </script>
      
    </body>
    </html>

    chevron_right

    
    

    OUTPUT :

  • Drawing Image On A Canvas

    INPUT :

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <body>
      
    <p>Image to use:</p>
    <img id="scream" src="http://www.theartstory.org/images20/works/van_gogh_vincent_7.jpg" alt="VAN GOGH" width="100" height="200">
      
    <p>Canvas to fill:</p>
    <canvas id="myCanvas" width="150" height="250"
    style="border:1px solid #d3d3d3;">
    </canvas>
      
    <p><button onclick="myCanvas()">Click to Try</button></p>
      
    <script>
    function myCanvas() {
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        var img = document.getElementById("scream");
        ctx.drawImage(img,0,0);
    }
    </script>
      
    </body>
    </html>

    chevron_right

    
    

    OUTPUT :

  • HTML Canvas Shadow blur property

    INPUT :

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <body>
      
    <canvas id="myCanvas" width="500" height="250";">
      
    <script>
      
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.shadowBlur = 20;
    ctx.shadowColor = "yellow";
    ctx.fillStyle = "red";
    ctx.fillRect(30, 20, 100, 80);
      
    </script>
      
    </body>
    </html>

    chevron_right

    
    

    OUTPUT :



  • Rotate method in HTML Canvas

    INPUT :

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <body>
      
    <canvas id="myCanvas" width="300" height="150;">
      
      
    <script>
      
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.rotate(20 * Math.PI / 180);
    ctx.fillRect(100, 20, 100, 50);
      
    </script>
      
    </body>
    </html>

    chevron_right

    
    

    OUTPUT :

  • HTML Canvas Translate
    The translate() method remaps the (0,0) position on the canvas.
    INPUT :

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    Run »Result Size: 625 x 590
      
    <!DOCTYPE html>
    <html>
    <body>
    ?
    <canvas id="myCanvas" width="300" height="150;">
    ?
    ?
    <script>
    ?
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillRect(10, 10, 100, 50);
    ctx.translate(80, 90);
    ctx.fillRect(10, 10, 100, 50);
    ?
    </script>
    ?
    </body>
    </html>
    ?

    chevron_right

    
    

    OUTPUT :

  • Transform method in HTML Canvas

    INPUT :

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <body>
      
    <canvas id="myCanvas" width="300" height="150;">
      
    <script>
      
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
      
    ctx.fillStyle = "yellow";
    ctx.fillRect(0, 0, 250, 100)
      
    ctx.transform(1, 0.5, -0.5, 1, 30, 10);
    ctx.fillStyle = "grey";
    ctx.fillRect(0, 0, 250, 100);
      
    ctx.transform(1, 0.5, -0.5, 1, 30, 10);
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, 250, 100);
      
    </script>
      
    </body>
    </html>

    chevron_right

    
    

    OUTPUT :

  • Creating Animation in HTML Canvas
    Javascript helps to simulate good animation over a HTML5 canvas.

    Two important Javascript methods which can be used to animate an image on a canvas :

    1. setInterval(callback, time):This method repeatedly executes the supplied code after a given time.
    2. setTimeout(callback, time):This method executes the supplied code only once after a given time.

    INPUT :

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE HTML>
    <html>
       <head>
            
          <script type="text/javascript">
             var pattern= new Image();
               
             function animate(){
                pattern.src = 
                setInterval(drawShape, 100);
             }
               
             function drawShape(){
               var canvas = document.getElementById('mycanvas');
                  
                   var ctx = canvas.getContext('2d');
                   ctx.fillStyle = 'rgba(20,20,20,20)';
                   ctx.strokeStyle = 'rgba(0,153,255,0.4)';
                   ctx.save();
                   ctx.translate(150,150); 
                     
                   var time = new Date(); 
                   ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() 
                       + ( (2*Math.PI)/6000)*time.getMilliseconds() );
                   ctx.translate(0,28.5);
                   ctx.drawImage(pattern,-3.5,-3.5);
                   ctx.restore();
                  
             }
          </script>
       </head>
         
       <body onload="animate();">
          <canvas id="mycanvas" width="400" height="400"></canvas>
       </body>
         
    </html>

    chevron_right

    
    

    OUTPUT :
    Kindly visit the link below to see the output of the above code:



My Personal Notes arrow_drop_up

I am a technology enthusiast who has a keen interest in programming I am pursuing Engineering in Computer Science from GEU, Dehradun I like to unwind by watching movies and English sitcomsI have a keen interest in music

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.