How to set image as the background in spainter js?

user_15624459 0
Viewed 36

I am trying to use an image as background image in spainter.

enter image description here

I use context.drawImage() to set image into canvas but not working.

here my code:

<script src="https://cdn.jsdelivr.net/npm/spainter@1.0.0/index.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/spainter@1.0.1/index.css"/>
<div id="containerPainter"></div>
<script>
var p = new Painter(containerPainter);
var context = document.getElementsByTagName('canvas')[0].getContext('2d');
 base_image = new Image();
  base_image.src = 'https://i.stack.imgur.com/jGZtm.png';
  context.drawImage(base_image, 0, 0);
</script>

So, I need your help. Thank you

canvas html javascript
1 Answers

You would need to draw the image after it has been loaded. Using onload listener will work for you like so :-

<script src="https://cdn.jsdelivr.net/npm/spainter@1.0.0/index.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/spainter@1.0.1/index.css"/>
<div id="containerPainter"></div>
<script>
var p = new Painter(containerPainter);
var context = document.getElementsByTagName('canvas')[0].getContext('2d');
 base_image = new Image();
  base_image.src = 'https://i.stack.imgur.com/jGZtm.png';
  base_image.onload = () => context.drawImage(base_image, 0, 0);
</script>

It seems to work if the image is a blob. Here is that code (posting since StackOverflow doesn't allow going over certain character limits) :-

https://codepen.io/lapstjup/pen/YzZNWEX

user_81306900
Related