Drawing Image

Images need to be drawn to the Canvas via the drawImage API. This function takes the image object itself as well as the location on the Canvas to draw that Image.

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

    <script>

        var canvas = null;
        var context = null;
        var img = null;

        var onImageLoad = function() {
            console.log("Image!");
            context.drawImage(this, 192, 192);
        };

        var setup = function() {
            var body = document.getElementById('body');
            canvas = document.createElement('canvas');

            context = canvas.getContext('2d');

            canvas.setAttribute('width', 1000);
            canvas.setAttribute('height', 1000);

            body.appendChild(canvas);

            img = new Image();
            img.onload = onImageLoad;
            img.src = "/media/js/standalone/libs/gamdev_assets/ralphyrobot.png";
        };

        setup();

    </script>
</html>
procedural-drawing-in-canvas.jpg/
Edit tutorial

Comment on This Data Unit