Web World: canvas

Canvas Simplified

Canvas has some really complex examples.

This post is intended to explain using Canvas to animate a space ship with javascript for the non-expert.

I earlier blogged how to animate using SVG. With SVG you can get the image you drew by it's svg-dom id and delete it, then draw another one. Or just update its x,y coordinates!

Canvas however is a little harder. You have to draw over the old image to erase it, then draw the new one at the new coordinates.

You want to draw whatever was behind the image in order to erase it. For my example I used a solid white background so drawing a solid white image the same size as the original is my approach.

Here it is on jsfiddle in case you want to just see it run. http://jsfiddle.net/uponthecouch/2JXJr/4/

Sometimes it is handy to have the entire thing in a single file such as you could put in an eclipse Static Web Project and try out by just pressing the play button right on our own machine:

 
<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>SVG attempt</title>
  <style>
   #canvasContainer 
   {
       width: 600px;
       height: 200px;
       background-color: white;
       border:1px solid black;
   }
  </style>
 </head>
 <body>
  <canvas id="canvasContainer">
  </canvas>
  <p>X coordinate: <span id="xcoor"></span>
  <p>Y coordinate: <span id="ycoor"></span>
  <script type="text/javascript">
   var canvas = document.getElementById("canvasContainer");
   var context = canvas.getContext('2d');
   var image = new Image();
   var clearImage = new Image();
   clearImage.src = "icons/shipClear.png";
   var x=0;
   var y=0;
   image.onload = function()
   {
    context.drawImage(image, x, y);
   };
   image.src = 'icons/shipNE.png';
   var timer = self.setInterval(function()
   {
       move_image();
   }, 100);
   
   function move_image()
   {
    context.drawImage(clearImage, x, y);
    x += 2;
    y += 2;
       if (y>200)
       {
           timer = window.clearInterval(timer)
           return;
       }
       context.drawImage(image, x, y);
       document.getElementById("xcoor").innerHTML = x;
       document.getElementById("ycoor").innerHTML = y;
   }
  </script>
 </body>
</html>

SVG has some really complex examples.

This post is intended to explain using SVG with javascript for the non-expert.

Here is a full working example showing how to place an svg element on an html page, create an svg image element, refer to it in javascript thru the SVG-DOM, and move an svg image element on the page such as one might in an arcade game.

This example is available as a jsfiddle here: http://jsfiddle.net/uponthecouch/pK84Y/

Sometimes it is handy to have the entire thing in a single file such as you could put in an eclipse Static Web Project and try out by just pressing the play button right on our own machine:

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>SVG attempt</title>
  <style>
   #svgContainer 
   {
       width:600px;
       height:200px;
       background-color:#EEEEEE;
       border:1px solid #c3c3c3;
   }
  </style>
 </head>
 <body>
  <svg id="svgContainer" xmlns="http://www.w3.org/2000/svg" version="1.1">
  </svg>
   <p>X coordinate: <span id="xcoor"></span>
   <p>Y coordinate: <span id="ycoor"></span>
   <script type="text/javascript">
    var container = document.getElementById("svgContainer");
    var x = 0;
    var y = 0;
    var image = document.createElementNS("http://www.w3.org/2000/svg", "image");
    image.setAttribute('height','10');
    image.setAttribute('width', '10');
    image.setAttribute('id','testimg');
    image.setAttribute('x', x);
    image.setAttribute('y', y);
    image.setAttributeNS('http://www.w3.org/1999/xlink','href',"http://i50.tinypic.com/24c8twj.jpg");
    container.appendChild(image);
    var timer = self.setInterval(function() 
    {
        move_image(x += 2, y += 2);
    }, 100);
    
    function move_image(x, y)
    {
        if (y>200)
        {
            timer = window.clearInterval(timer)
            return;
        }
        image.setAttribute('x', x);
        image.setAttribute('y', y);
        document.getElementById("xcoor").innerHTML = x;
        document.getElementById("ycoor").innerHTML = y;
    }
  </script>
 </body>
</html>

Questions to ask might be:

Why use namespace specific methods for creating the element, and specifying the image source, but not the other attributes?

Can SVG, html, and even canvas elements exist on the same page? On top of one another?

A question to be answered (hopefully) in a future post:

Which is better for moving things like ships around on a page, Canvas or SVG? Things like hit detection, bullets/projectiles, enemies all seem to point to SVG, surprisingly depending on the simplicity of the background Canvas may be more performant ...

Here is a link to my post about using Canvas to do the same thing.

Here is the same thing, done differently:

The svg image element is moved by deleting the existing one and creating a whole new one: this serves to show how to locate an svg element and delete it if nothing else. It is surprisingly hard to find simple examples of how to do this sort of thing.

Here is the Jsfiddle showing this alternative technique:
http://jsfiddle.net/uponthecouch/M9LF7/

This is the javascript, the html and css is unchanged from the first example:

var container = document.getElementById("svgContainer");
var x = 0;
var y = 0;
var image = null;
var timer = self.setInterval(function() 
{
    create_image(x += 2, y += 2);
}, 100);

function create_image(x, y) 
{
    if (y>200)
    {
        timer=window.clearInterval(timer)
        return;
    }
    console.log("x,y = " + x + "," + y);
    if (image != null) 
    {
        var parent = image.parentNode;
        console.log(parent);
        parent.removeChild(image);
    }
    image = document.createElementNS("http://www.w3.org/2000/svg", "image");
    image.setAttribute('height', '10');
    image.setAttribute('width', '10');
    image.setAttribute('id', 'testimg');
    image.setAttribute('x', x);
    image.setAttribute('y', y);
    image.setAttributeNS('http://www.w3.org/1999/xlink', 'href', "http://i50.tinypic.com/24c8twj.jpg");
    container.appendChild(image);
    document.getElementById("xcoor").innerHTML = x;
    document.getElementById("ycoor").innerHTML = y;
}

Web World

Wednesday, August 22, 2012

Canvas Simplified

Canvas Simplified

Canvas has some really complex examples.

This post is intended to explain using Canvas to animate a space ship with javascript for the non-expert.

Monday, August 20, 2012

SVG Simplified

SVG has some really complex examples.

This post is intended to explain using SVG with javascript for the non-expert.

Questions to ask might be:

A question to be answered (hopefully) in a future post:

Here is the same thing, done differently:

Super Cool Stuff!