add background image on html 5 canvas

Question

I want to generate a image that can be shared, using HTML 5 canvas , but i'm getting problem to add images canvas:

here is my code:

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="the_text" style="display: none;width:100%;height:1000px;background-color:red;">
    CERTIFICATE OF ATTENDANCE

  </div>
  <button id="show_img_btn">Search</button>
  <div class=" center-screen" id="show_img_here" style="">

  </div>

</body>

<script async src="https://static.addtoany.com/menu/page.js"></script>

Javascript:

window.onload = function() {
  $("#show_img_btn").on("click", function() {
    var canvas = document.createElement("canvas");
    canvas.width = 800;
    canvas.height = 500;
    var ctx = canvas.getContext('2d');

    var img1 = new Image();

    //drawing of the test image - img1
    img1.onload = function() {
      //draw background image
      ctx.drawImage(img1, 0, 0);
      //draw a box over the top
      ctx.fillStyle = "rgba(200, 0, 0, 0.5)";
      ctx.fillRect(0, 0, 800, 500);

    };

    img1.src = 'http://cdn.playbuzz.com/cdn/503aeb8a-c1b8-4679-8ed3-da5e11643f29/8a940ebd-8630-4247-888e-c4c611f4f0e2.jpg';

    // rest of content

    ctx.fillStyle = '#c3d200';
    ctx.font = "45px panton";
    var text = $("#the_text").text();
    ctx.fillText(text, 10, 120);

    ctx.fillStyle = '#000000';
    ctx.font = "17px panton";
    var text = $("#the_text").text();
    ctx.fillText('Lorem ipsum dolor sit amet, consectetur:', 230, 280);

    ctx.fillStyle = '#000000';
    ctx.font = " bold 31px panton";
    var text = $("#the_text").text();
    ctx.fillText('Lorem ipsum dolor sit amet, consectetur', 180, 350);

    ctx.fillStyle = '#000000';
    ctx.font = " bold 31px panton";
    var text = $("#the_text").text();
    ctx.fillText('Lorem ipsum dolor sit amet, consectetur adipiscing', 80, 400);

    // create image
    var img = document.createElement("img");
    img.src = canvas.toDataURL();
    $("#show_img_here").append(img);
    //$("body").append(canvas);
  });
};

// share icons
var a2a_config = a2a_config || {};
a2a_config.overlays = a2a_config.overlays || [];
a2a_config.overlays.push({
  services: ['twitter', 'facebook', 'linkedin', 'email'],
  size: '50',
  style: 'horizontal',
  position: 'top center'
});

CSS:

body {
  background: white;
}



button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}


.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}

I also tried something like this, but dosent work.

var background = new Image();
background.src = "http://cdn.playbuzz.com/cdn/503aeb8a-c1b8-4679-8ed3-da5e11643f29/8a940ebd-8630-4247-888e-c4c611f4f0e2.jpg";

background.onload = function(){
    ctx.drawImage(background,0,0);   
}

or draw a image using image source:

var img = document.getElementById("image");
    ctx.drawImage(img, 0, 0);

None of this worked.

Note: using tag on html would fix my problem of inserting images , but it will not going to recognize as image to be shared on social networks.

here is the Demo test link: FIDDLE DEMO

I thinks this is what you are looking for https://stackoverflow.com/questions/6887183/how-to-take-screenshot-of-a-div-with-javascript If you need some additional help or this is does not solve your issue please let me know. — Maxwell Archer, Aug 10 '20 at 22:35
@AxelAldrich i think that my probkem is less complex than that, i just want to insert images source on canvas but it dosent work, please if you can , take a look of my fiddle demo code on description. — Pedro Mendes, Aug 11 '20 at 08:59
@sergeykuznetsov improved code formation , also added the hole HTML, javascript and CSS code , also inserted the fiddle demo with all this code. — Pedro Mendes, Aug 11 '20 at 09:00

score 1 · Answer 1 · answered Aug 11 '20 at 12:28

Render content after loading

You are rendering content (text) to the canvas and adding that content as an image before the background image has loaded.

Then the background image load event fires and you draw the background image over the content, but as you have already displayed the canvas content (as an image) thus the background image is never displayed.

Always use the Image.onload event

When ever you set an Image.src attribute use the load event to start any form of rendering involving that image.

Example

Example is taken from your posted code and cut down to show the basics. The background image is cross domain which taints the canvas thus example has the final output (as Image) commented out. Instead of an image it just adds the canvas when the render is complete.

The whole render process is in one function that is called when the background image has loaded.

I have removed jQuery as it is irrelevant to the problem and solution.

show_img_btn.addEventListener("click", function() {
    const canvas = document.createElement("canvas");
    canvas.width = 800;
    canvas.height = 500;
    const ctx = canvas.getContext('2d');

    const bgImg = new Image();
    bgImg.src = 'http://cdn.playbuzz.com/cdn/503aeb8a-c1b8-4679-8ed3-da5e11643f29/8a940ebd-8630-4247-888e-c4c611f4f0e2.jpg';
    
    bgImg.addEventListener("load", () => drawContent(ctx, bgImg), {once: true});
    ctx.fillText("Loading image...", 50, 50);
    
});
function drawContent(ctx, bgImg) {
    ctx.drawImage(bgImg, 0, 0);
    ctx.fillStyle = "rgba(200, 0, 0, 0.5)";
    ctx.fillRect(0, 0, 800, 500);

    ctx.textAlign = "center";
    ctx.fillStyle = '#c3d200';
    ctx.font = "45px panton";
    ctx.fillText(the_text.textContent, ctx.canvas.width / 2, 120);

    /* Tainted canvas can not get pixel data on cross origin image (from cdn.playbuzz.com to stackoverflow.com)
    var img = document.createElement("img");
    img.src = ctx.canvas.toDataURL();
    img.addEventListener("load", () => {
          show_img_here.appendChild(img);
    }, {once: true});
     */

    show_img_here.appendChild(ctx.canvas);

};

body {
  background: white;
}
button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

<div id="the_text" style="display: none;width:100%;height:1000px;background-color:red;">CERTIFICATE OF ATTENDANCE</div>
<button id="show_img_btn">Load & create image</button>
<div class=" center-screen" id="show_img_here" style=""></div>

Thx, this is a really great explanation , although the final result of document comes as canvas and not as image, but i think that can be fixed if the image is converted to base64 and use toDataURL() method. — Pedro Mendes, Aug 11 '20 at 14:11

score -1 · Answer 2 · answered Aug 11 '20 at 14:04

-1

i found out that converting the png or jpg file to base64 solved my problem:

by converting to base64 is now possible to transform the canvas to png or jpg;
the social network icons plug-in is now recognizing the picture as image;

answered Aug 11 '20 at 14:04

Pedro Mendes

99
2
12

add background image on html 5 canvas

2 Answers2

Render content after loading

Always use the Image.onload event

Example