Drawing Image

Created on Feb. 8, 2013, 12:43 a.m. by Hevok & updated by Hevok on May 2, 2013, 5:09 p.m.

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

Tags: programming, js, coding, html, rendering, draw
Categories: Tutorial, reST
Parent: HTML5
Children: DrawImage From Atlas

Update entry (Admin) | See changes

Comment on This Data Unit