Assign values to the attributes (css) of an image for a canvas

Navigation
0

I have an object that has a method that creates a img element within a canvas, the problem is that I could not give it " style ", I was working with a div in instead of a canvas and had no problems. I load the image well, just without style, I tried with: setAttributte('style','...') and with oImg.style['atributo'].

Can someone tell me what I'm doing wrong?

Thanks in advance:

Code: 

 <body style="background-color: black;">

<canvas id="myCanvas" width="600" height="400"
style="border:1px solid #c3c3c3;">
</canvas>

 <script>

 let objeto = new Personaje("id23","30%",0);
 objeto.nacimiento();

</script>

</body>

And here is the method of my class: 

nacimiento(){

    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var oImg = document.createElement('img');
    oImg.src = "transparente.png";        

    oImg.style.width="22px";
    oImg.style.height="22px";
    oImg.style.background="url('sprite.png') -3px -3px";
    oImg.style.position="absolute";

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


}
    
asked by Eduardo Cervantes 19.07.2018 в 17:45
source

1 answer

1

Try this: 

var img = new Image();
img.src = "transparente.png";
img.onload = function(){
   ctx.drawImage(img, 0,0, img.width = 22, img.height=22);
ctx.stroke();

}
    
answered by 19.07.2018 в 18:21
do a correct if else in MySQL procedure? How to show the value of 1 of a check as a text