13 May 2014

HTML5 JavaScript Canvas Examples

These are very simple examples of drawing on Javascript Canvas, which I'm focused on right now.

First example is drawing some text. Here is how it looks like:



<!DOCTYPE HTML>
<html> 
<head>
  <script src="app1.js"></script> 
</head>     
<body> 
    <div style="width:450px; height:150px; 
            margin:0 auto; padding:3px;">
        <canvas   id="canvasArea" width="450" height="150" 
            style="border:1px solid black">
        </canvas>
    </div> 
</body> 
</html>

window.onload = function()
{ 
   canvas  = document.getElementById("canvasArea"); 
   context = canvas.getContext("2d");

   var mText = "Hello Earth! This is Flanture drawing Canvas ...";
   var xPos  = canvas.width/2;
   var yPos  = canvas.height/2;

   context.font         = "45pt Comic Sans MS"; 
   context.fillStyle    = "navy";
   context.textAlign    = "center"; 
   context.textBaseline = "middle";

   context.fillText(mText, xPos, yPos);                  
}


Another simple example would be drawing some rectangles on Canvas.



<!DOCTYPE HTML>
<html> 
<head>
  <script src="app.js"></script> 
</head>     
<body> 
   <div style="width:450px; height:350px; 
            margin:0 auto; padding:3px;">
      <canvas   id="canvasArea" width="450" height="300" 
         style="border:1px solid black">
      </canvas>
      <canvas   id="canvasArea2" width="450" height="50" 
         style="border:1px solid black">
      </canvas>      
   </div> 
</body> 
</html>

window.onload = function()
{ 
   canvas  = document.getElementById("canvasArea"); 
   context = canvas.getContext("2d");

   var xPos = 30; var yPos = canvas.height/2-50;
   var width = 100; var height = 50;

   context.lineWidth = 10;
   context.strokeStyle = "lightgreen";
   context.strokeRect(xPos+130, yPos, width, height+100);

   context.fillStyle = "teal";
   context.fillRect(xPos, yPos, width, height+10);
   context.clearRect(xPos+10, yPos+10, width-30, height-10);

   context.fillStyle = "darkkhaki";
   context.fillRect(xPos+260, yPos, width, height);
   context.clearRect(xPos+285, yPos+10, width-50, height-20);

// now canvas number 2

   canvas2 = document.getElementById("canvasArea2");
   context2 = canvas2.getContext("2d");

   var m2Text = "drawing rectangles on canvas";
   var x2Pos = canvas2.width/2;
   var y2Pos = canvas2.height/2;

   context2.font         = "12pt Comic Sans MS"; 
   context2.fillStyle    = "navy";
   context2.textAlign    = "center"; 
   context2.textBaseline = "middle";

   context2.fillText(m2Text, x2Pos, y2Pos);      

}


As you can see Canvas number 2 is only for showing text, can be excluded.

Now, just to make things a little bit complicated, here is example for drawing random rectangles on Canvas. It is kinda simple generative art example. This one uses only one color, but you can randomize colors also and even include gradients, both linear and radial. For simple gradient colors creation check this link .



window.onload = function()
{ 
   canvas  = document.getElementById("canvasArea"); 
   context = canvas.getContext("2d");

   var i, xPos, yPos, width, height;
   for (i = 0; i < 20; i++) {

      xPos = Math.random()*canvas.width;
      yPos = Math.random()*canvas.height;
      width = 10+Math.random()*100;
      height = 10+Math.random()*100;

      context.fillStyle = "darkkhaki";
      context.fillRect(xPos, yPos, width, height);
   }
}


File index.html is same as above. By refreshing your page you create new image every time. Nice.

Way back in July 2009 there was post AS3 Drawing API examples with some drawing API practice. Here are exactly the same six figures drawn on JavaScript Canvas.

window.onload = function()
{ 
   canvas  = document.getElementById("canvasArea"); 
   context = canvas.getContext("2d");

    context.beginPath();
    context.lineWidth=2;
    context.fillStyle="lightgrey";
    context.strokeStyle="black";
    
    context.moveTo(50,110);
    context.lineTo(50,50);
    context.lineTo(70,50);
    context.lineTo(70,70);
    context.lineTo(90,70);
    context.lineTo(90,50);
    context.lineTo(110,50);
    context.lineTo(110,110);
    context.lineTo(90,110);
    context.lineTo(90,90);
    context.lineTo(70,90);
    context.lineTo(70,110);
    context.lineTo(50,110);
    context.fill();
    context.stroke();
    
    context.beginPath();
    context.moveTo(200,60);
    context.lineTo(210,80);
    context.lineTo(230,80);
    context.lineTo(220,100);
    context.lineTo(180,100);
    context.lineTo(170,80);
    context.lineTo(190,80);
    context.lineTo(200,60);
    context.fill();
    context.stroke();    
    
    context.beginPath();
    context.moveTo(285,70);
    context.lineTo(315,70);
    context.lineTo(335,110);
    context.lineTo(265,110);
    context.lineTo(285,70);    
    context.fill();
    context.stroke();
    
    context.beginPath();
    context.moveTo(50,160);
    context.lineTo(60,150);
    context.lineTo(70,160);
    context.lineTo(80,150);
    context.lineTo(90,160);
    context.lineTo(100,150);
    context.lineTo(110,160);
    context.lineTo(110,200);
    context.lineTo(50,200);
    context.lineTo(50,160);
    context.fill();
    context.stroke();
    
    context.beginPath();
    context.moveTo(200,150);
    context.lineTo(220,160);
    context.lineTo(230,180);
    context.lineTo(220,200);
    context.lineTo(200,210);
    context.lineTo(180,200);
    context.lineTo(170,180);
    context.lineTo(180,160);    
    context.lineTo(200,150);
    context.fill();
    context.stroke();
    
    context.beginPath();
    context.moveTo(300,150);
    context.lineTo(320,160);
    context.lineTo(330,180);
    context.lineTo(320,200);
    context.lineTo(300,210);
    context.lineTo(280,200);
    context.lineTo(270,180);
    context.lineTo(280,160);    
    context.lineTo(300,150);
    context.fill();
    context.stroke();    
    
    context.beginPath();
    context.fillStyle="white";
    context.moveTo(290,170);
    context.lineTo(310,170);
    context.lineTo(310,190);
    context.lineTo(290,190);
    context.lineTo(290,170);
    context.fill();
    context.stroke();        
}
[to be continued]

*_*

 

template by blogger templates