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

i have web page displays image in canvas element child div element. want able grab image canvas element , put div move around screen. using code below try , this. javascript code assigns value of canvas.todataurl() method, wrapped in "url()" method call, background image of div using jquery css() method. checked in chrome debugger console , backround-image property of div is set value returned canvas.todataurl() method. can see in backgroundimage field listed child of div's style property. if set watch expression $("#easter-egg-cat-1").css("backround-image") returns "none" value.

in case don't see background image in div. why , how can fix it?

<!-- these web page elements involved --> <div id="viewer-container">     <!-- div warning messages displayed if cat's face can not            detected in uploaded photo.  -->     <div class="kittydar-viewer" id="kittydar-viewer"></div>     <div id="viewer">         <canvas id="preview">         </canvas>         <canvas id="annotations">         </canvas>     </div>     <!-- progress messages kittydar detector displayed searches cat face in uploaded picture. -->     <div class="kittydar-progress" id="kittydar-progress">(none)</div> </div>   // script grabs image canvas element , sets //  desired divs background-image css property url provided //  canvas element. var previewcanvasasurl = $("#preview").get(0).todataurl();  $("#easter-egg-cat-1").css("backround-image", "url(" + previewcanvasasurl + ")"); 

you have typo:

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