In addition to image data, we can also extract an image data URL which is basically just a very long text string containing encoded information about the canvas image. Data URLs are extremely handy if we want to save the canvas drawing in local storage or in an offline database. In this recipe, we'll draw a cloud shape, get its data URL, and then insert it into the HTML page so that we can see what it looks like.
Follow these steps to convert a canvas drawing into a data URL:
Define the canvas context and draw a cloud shape:
window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var startX = 200; var startY = 100; // draw cloud shape context.beginPath(); context.moveTo(startX, startY); context.bezierCurveTo(startX - 40, startY + 20, startX - 40, startY + 70, startX + 60, startY + 70); context.bezierCurveTo(startX + 80, startY...