Loading Image

The bulk of Canvas interactions that Grids uses through rendering Images to the Canvas. In order to draw an image into the canvas, it first need to be loaded.

In order to load an Image, a new Image object need to be created. In JavaScript this is comprised of three steps:

  1. Declare a new Image() object
  2. Declare its onload method
  3. Set Image.src = "url"

As soon as the source Property of the Image is set to a value JavaScript will kick-off a load function. because of this the callback function need to be specified before setting the source attribute, otherwise the Image will load the data and it will there will be no callback received.

<html>
   <body>
   <canvas id="dj_canvas"></canvas>
   </body>

   <script>
       var canvas = null;

       setup = function() {
           var body = document.getElementById("body");  // Grab the body element using document.getElementById, assuming the body elements has an id 'body'.
           canvas = document.createElement("canvas"); // Create a canvas element
           context = canvas.getContext('2d');
           canvas.id = "dj_canvas";
           // then set the width and height properties to 1200 and  720, respectively.
           canvas.width = 1200; // window.innerWidth;
           canvas.height = 720; // window.innerHeight;
           body.appendChild(canvas);
       };
       setup();
   </script>
</html>
g_loading.gif/
Edit tutorial

Comment on This Data Unit