Canvas Images

A canvas is not an image. In order to store the contents of a canvas in an image, we must write the data from the canvas onto an <img> element. The JavaScript function 'canvas.toDataURL()' will convert the content of 'canvas' into an image. The code below will save the content of a canvas into a variable:

let dataURL = canvas.toDataURL();

The saved image can then be used like any other image variable. For example, it could be assigned to an image element, as shown in the code below:

document.getElementById('canvasImage').src = dataURL;

The example below shows how to copy the contents of a canvas in an image.

Example of a canvas being stored inside an image (Run Example)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Worked example from lecture notes</title>
<style>
#canvas,
#canvasImage
{
    border:1px solid black;
    width:200px;
    height:200px;
}

#canvasImageContainer
{
    margin-top:150px;
}
p
{
    margin:0px;
}

#loadingMessage
{
    position:absolute;
    top:100px;
    left:100px;
    z-index:100;
    font-size:50px;
}
</style>

<script>
const CANVAS_WIDTH = 200;
const CANVAS_HEIGHT = 200;
const DOT_WIDTH = 20;   /* The dimensions of the black squares that are drawn on the canvas */
const DOT_HEIGHT = 20;

let canvas = null;
let ctx = null;
let x = null;
let y = null;

window.onload = onAllAssetsLoaded;
document.write("<div id='loadingMessage'>Loading...</div>");
function onAllAssetsLoaded()
{
    // hide the webpage loading message
    document.getElementById('loadingMessage').style.visibility = "hidden";

    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    canvas.width = CANVAS_WIDTH;
    canvas.height = CANVAS_HEIGHT;

    renderCanvas();

    canvas.addEventListener('click', canvasClickHandler);
}


let isFirstTimeToRender = true;
let isDrawingADot = false;
function renderCanvas()
{
    if (isFirstTimeToRender)
    {
        isFirstTimeToRender = false;

        /* set the canvas background colour */
        ctx.fillStyle = "red";
        ctx.fillRect(0, 0, 200, 200);
    }
    else if (isDrawingADot)
    {
        isDrawingADot = false;
        ctx.fillStyle = "black";
        ctx.fillRect(x - (DOT_WIDTH / 2), y - (DOT_HEIGHT / 2), DOT_WIDTH, DOT_HEIGHT);
    }
}


function canvasClickHandler(e)
{
    if (e.which === 1)
    {
        isDrawingADot = true;
        x = window.event.clientX;
        y = window.event.clientY;

        renderCanvas();

        copyCanvasToImage();
    }
}


// Copy the content of the canvas to the image
function copyCanvasToImage()
{
    // save canvas image as data url (png format by default)
    let dataURL = canvas.toDataURL();

    // set canvasImg image src to dataURL
    // so it can be saved as an image
    document.getElementById('canvasImage').src = dataURL;
}
</script>
</head>
<body>
<div>
<canvas id = "canvas">
Your browser does not support the HTML5 'Canvas' tag.
</canvas>
<p>Click on the canvas above to add black squares onto it.</p> 
<p>Try right-clicking the canvas at the top and the red image below. You will notice that the canvas does not allow you to perform the same operations as the image does.</p>
</div>

<div id = 'canvasImageContainer'>
<p>The canvas's content is copied onto the image below.</p>
<p>Right click on image below to save it to your desktop.</p>
<img id='canvasImage'>
</div>
</body>
</html> 

Amend the code above so that the canvas and the image are positioned in the same location. Right-clicking will show the image and left-clicking will show the canvas, as shown here.

Amend the scribble canvas so that it includes a save button, as shown here. Hint, there is a hyperlink <a> tag 'download' property that you can use. You should make the <a> tag look like a button using CSS.

 
<div align="center"><a href="../../versionC/index.html" title="DKIT Lecture notes homepage for Derek O&#39; Reilly, Dundalk Institute of Technology (DKIT), Dundalk, County Louth, Ireland. Copyright Derek O&#39; Reilly, DKIT." target="_parent" style='font-size:0;color:white;background-color:white'>&nbsp;</a></div>