语言

Menu
Sites
Language
i want to remove background image in canvas

Hi,

in a canvas already have a background. but i want to change or remove pevrious background and (set the new one background)using any button click.

列表

响应

7 回复
colin Rao

I think canvas is also just a html5 tag, possible you can try to change its backgroud by css style property, such as background-color or background-image, as below sample code,

<canvas id="myCanvasTag" width="400" height="400" style="background-color:blue;border: 10px yellow solid"></canvas>

 

Vikram

CSS property background-image is set the background image for elements. Just like below, 'URL' point to the path of the image

body 
{
    background-image:url('URL');
}

 

daniel kim

Hi,

Wish below code will help you.

#canvas{
 position: absolute;
    left: 0px;
    top: 0px;
    background-image:url('../images/t1.png');
    background-repeat: no-repeat;
    width: 120px;
    height: 120px;

}

    <div style='margin: auto;'>   
     <div id="myCanvas"><canvas id="canvas" width="120" height="120"></canvas></div>  
     <button type="button" onClick="Whitecanvas()">change     
   </div>

 

function Whitecanvas(){
     document.getElementById("canvas").style.background = "url(images/t2.png)";
 }
 

Regards

ashish kumar

thank's this code are work fine...

Palitsyna

Hello,

you can try to do this with jQuery:

$('#canvas').css('background-color', 'red');

 

Vikram

Hi,

If you want to learn more detail info about background in CSS. You can refer to 

https://developer.tizen.org/development/guides/web-application/w3chtml5supplementary-features/dom-forms-and-styles/css-backgrounds-and-borders-module-level-3-0

 

AVSukhov

Hello,

Also you can use drawImage() function will help you with that, see 

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images