# Drawing an image from a data URL to a HTML5 canvas

HTMLWeb DevelopmentFront End Technology

#### Kickstart HTML, CSS and PHP: Build a Responsive Website

Featured

59 Lectures 8.5 hours

#### Web Design for Beginners: Build Websites in HTML & CSS 2022

68 Lectures 8 hours

#### Complete HTML/CSS Course 2022

Featured

47 Lectures 12.5 hours

If you have a data url, you can create an image to a canvas. This can be done as shown in the following code snippet −

var myImg = new Image;
myImg.src = strDataURI;

The drawImage() method draws an image, canvas, or video onto the canvas. The drawImage() method can also draw parts of an image, and/or increase/reduce the image size.

The code given below is also appropriate with the sequence - create the image, set the onload to use the new image, and then set the src −

// load image from data url
Var Obj = new Image();
Obj.src = dataURL;