Javascript Sprite Animation Not Transparent

108
February 27, 2021, at 09:20 AM

New to javaScript as a language but a fair amount of programming and developer experience.

Am trying to load a sprite sheet into an HTML5 canvas element.

The image loads in a normal img tag with transparency.

When I drawImage in JavaScript it loads with transparency.

When I try and loop through the sprite sheet to display a scaled sprite it does not display the transparency.

You can also see that the background is actually the dimensions of the sprite and not what I told it to draw on the canvass.

What is the best way to do this and get the transparency? Since I am trying to learn JavaScript I am hoping for a JavaScript solution not a CSS one. I have seen tutorials where they want me to loop through every pixel in the image to determine it's value then remove the transparency. Oh my goodness that seems like a ton of work to constantly be doing and I don't like it!

HERE IS WHAT I AM TALKING ABOUT:

https://test.cyberlearner.com/arcade/GuyGame/mainContent2.php

HERE IS MY CODE:

<canvas id="guyCanvas" width="800px" height="400px" />
</canvas>
<script>
    var guyCanvas = document.getElementById('guyCanvas');
    var guyContext = guyCanvas.getContext('2d');
    guyContext.fillStyle = "blue";
    guyContext.fillRect(0, 0, guyCanvas.width, guyCanvas.height);
    
    var guyx = 400;
    var guyy = 200;
    var guydx = 2;
    var guydy = -2;
    var testImage = new Image;
    testImage.src = 'images/OldGuySprite.png'; 
    let guyImage = new Image;
    guyImage.src = 'images/OldGuySprite.png';
    let counter = 0,
    guyFrame_width = 223,
    guyFrame_height = 450;
    guyImage.onload = function() {
    window.requestAnimationFrame(animate);
        function animate() {
            let guyFrame = Math.floor(counter % 4);
            guyContext.clearRect(guyx, guyy, guyCanvas.width, guyFrame_height);
            guyContext.drawImage(guyImage, guyFrame * guyFrame_width, 0, guyFrame_width, guyFrame_height, guyx, guyy, guyFrame_width/4, guyFrame_height/4);
            counter = counter + .25;
            window.requestAnimationFrame(animate);
        }
}
guyContext.drawImage(testImage, 0, 0);
</script>
<table><tr><td  style="background-color:#FF0000">
<img src="images/OldGuySprite.png">
</td></tr>
</table>
READ ALSO
Remove WooCommerce Tags when print invoice

Remove WooCommerce Tags when print invoice

I have a wordpress websiteI have been facing a problem with the website

48
How do I use an API in Discord.js?

How do I use an API in Discord.js?

I was looking for a cool way I could automate some interesting news articles on my discord serverI wanted to use webhooks at first but then decided to go with APIs

136
Android Room - &ldquo;Cannot figure out how to save this field into database.&rdquo;

Android Room - “Cannot figure out how to save this field into database.”

I try to create Room database and insert values to it, but I got this error:

144
java.lang.IllegalArgumentException: column &#39;_data&#39; does not exist. Available columns: []

java.lang.IllegalArgumentException: column '_data' does not exist. Available columns: []

--------- beginning of crash E/AndroidRuntime: FATAL EXCEPTION: main Process: comppcart, PID: 3019 java

206