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]

*_*

04 May 2014

AS vs JS GCD - WTF!?

explanation:
  AS -> ActionScript programming language
  JS -> JavaScript programming language
  vs -> versus
  GCD -> greatest common divisor
  WTF!? -> wtf

translation: Common stuff between ActionScript and JavaScript programming languages.

Both ActionScript and JavaScript are based on ECMA Script standard, so it's inevitably to have same language core. Syntax is almost the same, also object model and many classes like Array, Date, Math and String. Both languages implement same operators and dot syntax, so when you look at the code sometimes you will not be able to see the difference, because in some parts there aren't any.

Take a look at Drawing with JavaScript in HTML5 vs ActionScript 3 in Flash article by @WilliamMalone HTML5 Game developer from Denver, Colorado. Example will walk you through drawing of dynamic content (in this case it's a warning icon) in AS as well as in JS and every step has been done simultaneously which is perfect to notice differences and common things.

JavaScript / ActionScript drawing example


There are also things which are very similar and with similar function, but not the same. In ActionScript there are Local Share Objects and they look like other key-value based datastore, JavaScript "favorite cookies". Also event listeners and event handling is key on both sides if you considering game development and interactivity programming.
This is pretty much how to add new eventListener:

target.addEventListener('click', function() {
    /* actions */ 
}, false);

There are tons of predefined Events in AS and JS and you can create Custom Events if you want.

Browser window event types are: onclick, ondblclick, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup, onkeydown, onkeypress... 

You will probably use canvas as target in your browser, in this way:
 
canvas.addEventListener("type", function, false);

in which case you use "type" area events like these: click, dblclick, focus, focusin, focusout, keydown, keypress, keyup, mousedown, mouseenter, mousemove, mouseover, mouseup, mousewheel, pause, scroll, touchstart, touchmove ...


Despite many differences between ActionScript and JavaScript there is huge greatest common divisor worth knowing and developers who use both languages can confirm this is great advantage in fast moving web development world.

[to be continued]

*_*

28 March 2014

Tennis Stats Flash Animation Without Ana Ivanovic

This is my latest. It's not quite finished yet. Tennis stats animation is suppose to be collection of fictional tennis match animation panels with different statistical information displayed in appropriate form. Some panels are actually static but most are animated. They are all more or less based on real-life examples and can be modified to receive and display real match data.

Tennis Stats Animation



There are four panels right now, ones you can see on image above. Will add more later. Instead of currently displayed text "tennis stats animation" first plan was to create woman tennis silhouette in "waiting for serve" pose and animate it. My model was off course Ana Ivanovic, the most beautiful tennis player ever and as you can guess my "Ana playing" folder with video files became very heavy right away, but I just can't choose which file to use :) I'm working on it.

Your thoughts about it and how to improve it? (I mean animation off course, you just can't improve Ana)

*_*

 

template by blogger templates