Robert Oschler Robert Oschler - 1 month ago 13
CSS Question

Unable to get image in Canvas element to appear as DIV background image (HTML/Javascript)?

I have a web page that displays an image in a CANVAS element that is a child to a DIV element. I want to be able to grab the image from a CANVAS element and put it into a DIV that I will move around the screen. I am using the code below to try and do this. The Javascript code assigns the value of the canvas.toDataURL() method, wrapped in a "url()" method call, to the background image of the DIV using the JQuery CSS() method. I checked in the Chrome debugger console and the backround-image property of the DIV is set to the value returned by the canvas.toDataURL() method. I can see it in the backgroundImage field that is listed as a child of the DIV's Style property. However if I set a Watch expression to $("#easter-egg-cat-1").css("backround-image") it returns "none" as the value.

In any case I don't see the background image in the DIV. Why is this and how can I fix it?

<!-- THESE ARE THE WEB PAGE ELEMENTS INVOLVED -->
<div id="viewer-container">
<!-- This DIV is where any warning messages will be displayed if a cat's face can not be
detected properly in the uploaded photo. -->
<div class="kittydar-viewer" id="kittydar-viewer"></div>
<div id="viewer">
<canvas id="preview">
</canvas>
<canvas id="annotations">
</canvas>
</div>
<!-- This is where progress messages from the KittyDar detector are displayed as it searches for a cat face in the uploaded picture. -->
<div class="kittydar-progress" id="kittydar-progress">(none)</div>
</div>


// This is the script that grabs the image from the CANVAS element and sets the
// the desired DIVs background-image CSS property to the URL provided by the
// CANVAS element.
var previewCanvasAsUrl = $("#preview").get(0).toDataURL();

$("#easter-egg-cat-1").css("backround-image", "url(" + previewCanvasAsUrl + ")");

dmk dmk
Answer

You have a typo:

$("#easter-egg-cat-1").css("background-image", "url(" + previewCanvasAsUrl + ")");
                                ^