Using Cloudinary images in Canvas

Canvas demonstration, passing CORS issues

by jwerre

HTML

<p>Canvas to fill:</p>
<canvas id="myCanvas" width="250" height="300"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<p><button id="button">Try it</button></p>
    
<p id='url'></p>

JavaScript

function myCanvas() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = new Image();
  /* img.setAttribute('crossOrigin', 'anonymous') */;
  img.src = "https://public.surveyplanet.com/images/illustrations/illustration_01.png";
  img.onload = function() {
    ctx.drawImage(img,10,10);
    dataURL = c.toDataURL();
    console.log(dataURL)
    var p = document.getElementById("url");
    p.innerHTML = dataURL;
  };
}

button = document.getElementById("button");
button.onclick = function(){myCanvas()};