How to download HTML canvas drawing as image from button click

Question

I'm having a lot of difficulty figuring out how to do this, I've looked all over for solutions but can't seem to get anywhere. I've tried copying in code from working examples from the internet but whenever I put it into my own code it just doesn't seem to work.

I'm simply looking for when you draw in the canvas you click download and it saves what you drew on the canvas to your local storage.

Can someone help me out? Below is my code

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>


<style>
canvas { border: 5px solid blue }


</style>

</head>
<body>
<canvas id="c" width="500" height="300"></canvas>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>


<script>
function midPointBtw(p1, p2) {
  return {
    x: p1.x + (p2.x - p1.x) / 2,
    y: p1.y + (p2.y - p1.y) / 2
  };
}

function getPattern() {
  return ctx.createPattern(img, 'repeat');
}


var el = document.getElementById('c');
var ctx = el.getContext('2d');

ctx.lineWidth = 50;
ctx.lineJoin = ctx.lineCap = 'round';

var img = new Image;
img.onload = function() {
  ctx.strokeStyle = getPattern();
};
img.src = "https://i.postimg.cc/rF2R0GRY/dick2.png";

var isDrawing, points = [];




var getXY = function(e) {
  var source = e.touches ? e.touches[0] : e;

  return {
    x: source.clientX,
    y: source.clientY
  };
};

var startDrawing = function(e) {
  isDrawing = true;
  points.push(getXY(e));
  event.preventDefault();

};


var keepDrawing = function(e) {
  if (!isDrawing) return;

  points.push(getXY(e));
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

  var p1 = points[0];
  var p2 = points[1];

  ctx.moveTo(p1.x, p1.y);

  for (var i = 1, len = points.length; i < len; i++) {
    var midPoint = midPointBtw(p1, p2);
    ctx.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y);
    p1 = points[i];
    p2 = points[i + 1];
  }
  ctx.lineTo(p1.x, p1.y);
  ctx.stroke();
  event.preventDefault();
};


var stopDrawing = function() {
  isDrawing = false;
  points = [];
};

el.addEventListener('touchstart', startDrawing);
el.addEventListener('mousedown', startDrawing);

el.addEventListener('touchmove', keepDrawing);
el.addEventListener('mousemove', keepDrawing);

el.addEventListener('touchend', stopDrawing);
el.addEventListener('mouseup', stopDrawing);

function clearCanvas(canvas,ctx) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

function download() {
var download = document.getElementById("download");
var image = document.getElementById("c").toDataURL("image/png")
    .replace("image/png", "image/octet-stream");
download.setAttribute("href", image);
//download.setAttribute("download","archive.png");
}

</script>


<form id ="search">
<input type = "text" name="message" id="user_input">
<input type = "submit" value="Clear Sketchpad" id="clearbutton" 
onclick="clearCanvas(canvas,ctx);">
</form>
<a id="download" download="triangle.png">
<button type="button" onClick="download()">Download</button>
</a>

<p><span id='display'></span></p>
</body>
</html>

score 0 · Answer 1 · answered Mar 19 '19 at 01:08

It seems your function download wasn't defined at the time "onclick" is used. Uncaught ReferenceError: function is not defined with onclick

Instead of having onclick on html, bind it in javascript with addEventListener.

var d = document.getElementById("download");
d.addEventListener("click",function(){
var image = document.getElementById("c").toDataURL("image/png")
    .replace("image/png", "image/octet-stream");
d.setAttribute("href", image);
})

https://jsfiddle.net/8sa3ugcm/

Without setting `img.crossOrigin = "Anonymous";`, this solution will fail with a `SecurityError` if the image comes from a remote domain. — Dev Yego, Aug 24 '20 at 20:13

score 0 · Answer 2 · answered Mar 19 '19 at 05:57

<form id ="search">
<input type = "text" name="message" id="user_input">
<input type = "submit" value="Clear Sketchpad" id="clearbutton" 
  onclick="clearCanvas(canvas,ctx);">
 </form>
 <a id="download" download="triangle.png">
 <button type="button" onClick="download()">Download</button>
 </a>

The first onclick has as lowercase 'c'. The second one has uppercase 'C'.

The first one is correct.

How to download HTML canvas drawing as image from button click

2 Answers2