How to make canvas with image background can be downloaded

Asked May 09 '19 at 13:09

Active May 09 '19 at 13:09

Viewed 64 times

i want canvas can be downloaded with the background image, when draw and click circle is done. How can i insert image on the code? so i can download it with the canvas

<script type="text/javascript">
$("#canvas").click(function(e){
   getPosition(e);

  });

  var pointSize = 3;

  function getPosition(event){
   var rect = canvas.getBoundingClientRect();
   var x = event.clientX - rect.left;
   var y = event.clientY - rect.top;

   drawCoordinates(x,y);

  }

  function drawCoordinates(x,y){

  var ctx = document.getElementById("canvas").getContext("2d");
  ctx.fillStyle = "#ff2626"; // Red color
  ctx.beginPath();
  ctx.arc(x, y, pointSize, 0, Math.PI * 2, true);

  ctx.fill();
  }
</script>

asked May 09 '19 at 13:09

Dwi Noviandaru

1

check [8126623](https://stackoverflow.com/questions/8126623/downloading-canvas-element-to-an-image) – Radonirina Maminiaina May 09 '19 at 13:11
It's not clear, you want the user to be able to download the drawn image on canvas as an image (jpg, png ?) ? – Maelig May 09 '19 at 13:12
Still not clear, what do you mean by background image ? Can you provide a JSFiddle ? – Maelig May 09 '19 at 14:29
what i want is when download canvas, the background image on canvas be downloaded too, like this https://i.imgur.com/5CX2y0o.jpg @Maelig – Dwi Noviandaru May 09 '19 at 14:41
but when i download the canvas only like this https://i.imgur.com/Jjhk17Z.png @Maelig – Dwi Noviandaru May 09 '19 at 14:46
if you want any background, you have to draw it on the canvas itself, before the user draw anything. What kind of background you want, unicolor or an image ? – Maelig May 10 '19 at 09:01
an image, do you have code related what i want? @Maelig – Dwi Noviandaru May 12 '19 at 09:26
First draw the image (http://www.williammalone.com/briefs/how-to-draw-image-html5-canvas/) then draw your circles, then download your image – Maelig May 14 '19 at 12:18

How to make canvas with image background can be downloaded

0 Answers0