HTML | Canvas Basics - GeeksforGeeks

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 :

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

OUTPUT :

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

Drawing A Circle

INPUT :

<!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> 

OUTPUT :

Drawing a Text

INPUT :

<!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> 

OUTPUT :

Drawing Linear Gradient

INPUT :

<!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> 

OUTPUT :

Drawing Image On A Canvas

INPUT :

<!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> 

OUTPUT :

HTML Canvas Shadow blur property

INPUT :

<!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> 

OUTPUT :

Rotate method in HTML Canvas

INPUT :

<!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> 

OUTPUT :

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

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> 
? 

OUTPUT :

Transform method in HTML Canvas

INPUT :

<!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> 

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 :

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

INPUT :

<!DOCTYPE HTML> 
<html> 
   <head> 
        
      <script type="text/javascript"> 
         var pattern= new Image(); 
           
         function animate(){ 
            pattern.src =  
'https://www.reproduction-gallery.com/catalogue/uploads/1463472974_large-image_pablopicassowomanfacingtotheright1934lg.jpg'; 
            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> 

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

My Personal Notes

Jul	AUG	Sep
	19
2018	2019	2020

Suggest a Topic

Recommended Posts: