Genius

Images

We can draw an image onto a canvas, as shown below:

let img = new Image();
img.src = "images/dkit01.png";


window.onload = function ()
{
    ctx.drawImage(img, 100, 100, 300, 300);
}

This will draw the image at position, 100, 100 with a width and height of 300. An image will only be drawn on a canvas if the image has been loaded into the webpage. For this reason, we should always wrap the canvas code inside a "window.onload()" function. The image must be declared outside of the window.onload() function. That way, the window.onload() function will only be called after the image has loaded. This is shown in the example below.

Example of a canvas image (Run Example)

<!-- Author: Derek O Reilly, Dundalk Institute of Technology, Ireland. -->

<!DOCTYPE html>
<html>
    <head>
        <title>Course notes example code</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <style>
            #gameCanvas
            {
                /* the canvas styling usually does not change */
                outline:1px solid darkgrey;
                width:500px;
                height:500px;
            }
        </style>

        <script>
            let img = new Image(); // note that the offscreen image must be declared OUTSIDE of the window.onload() function 
            img.src = "images/city.png";
            
            window.onload = function ()
            {
                let canvas = document.getElementById("gameCanvas");
                canvas.width = canvas.clientWidth;
                canvas.height = canvas.clientHeight;
                let ctx = canvas.getContext("2d");

                // draw an image on the canvas
                ctx.drawImage(img, 100, 100, 300, 300);
            };
        </script>
    </head>

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

Write code to draw a centred image and four corner images on the canvas, as shown here.