Base64 Png Data to HTML5 Canvas

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')

var image = new Image();
image.onload = () => { ctx.drawImage(image, 0, 0) }
image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAQAAAAngNWGAAAAF0lEQVR42mNk+M9AFGAcVTiqcFQhCAAAf0sUAaSRMCEAAAAASUVORK5CYII="

var image2 = new Image()
image2.onload = () => { for(i=1; i<9; i++) ctx.drawImage(image2, 30*i, 5+i) }
image2.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg=="

<canvas id="canvas"></canvas>

Convert and insert Base64 data to Canvas in Javascript

You don't need to "decode" a base64 string to draw it in a canvas, just assign it to an image source and draw that image in your canvas.

Something like this:

var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');var img = new Image();
img.onload = function() {  context.drawImage(this, 0, 0, canvas.width, canvas.height);}
img.src = "data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4MLwWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw==";

<canvas id="canvas" width="50" height="50"></canvas>

var img = new Image();
img.src = "data:image/png;base64,.............";
ctx.drawImage(img,0,0);