With help some time ago, an AS3 animation (for an eLearning lesson) was ported to JS. Because of the scaling, it displays in browsers as blurry. I think the problem is that the canvas drawing is using 1X1 rectangles, when they should be 8X8. Also, there are mis-matches between canvas size in the JS, CSS, index files. Canvas should be 640X640.
I have tried to fix this but with no success and would appreciate any help getting it sized correctly and displaying clearly.
Thank you for your reply. I had found this information earlier and tried it without success.
I suspect that the problem is that the script is using scaling which causes blurring. (I am a beginner and don’t fully understand the script. A few years ago, someone had helped with the script-no longer available to help). I think that it is trying to build the animation with 1X1 rectangles and then scale them up (8X) to the canvas size. Instead, I think that it would solve the scaling/blurring problem if it started with 8X8 rectangles. But, I don’t know how to re-write this to accomplish the change. Also, the canvas size is different in 2 files (style.css and index.html) : 640X640 (correct size) in one and 80X80 in the other. Simply changing these has also not been successful in solving the problem. So, I’m stuck, need some additional help to get it working without blurring.
Any help re-writing to avoid scaling, match up canvas sizes, would be appreciated.
No - the problem in this case is that CSS is being used to stretch the canvas, so the web browser automatically interpolates the image which blurs it.
Do not use CSS to make the canvas bigger. Using CSS to make the width and height bigger is directly causing your problem.
So far as a solution goes, the canvas has a scale command.
Here are a couple of examples that demonstrate how the pixel art can be scaled up without smoothing by applying a custom scale command to the canvas:
Remove the bloody width and height parts from the CSS. They are badly scaling up the canvas, which is causing your unwanted blurry look.
Instead of using CSS, use a larger canvas in the HTML, and from the JavaScript scale up the context that JavaScript uses on the canvas.
So instead of doing that type of thing, it’s time to do it the old-fashioned way. I’ve put together a drawAtScale function instead, which also requires that a buffered work space is used, so that it can then be scaled to whatever size the target canvas is.
function drawAtScale() {
var width = buffer.width,
height = buffer.height,
xScale = canvas.width / width,
yScale = canvas.height / height,
i,
pixelDataSize = width * height;
for (i = 0; i < pixelDataSize; i += 1) {
displayCtx.fillStyle = "rgb(" + px.data[i * 4] + ", " + px.data[i * 4 + 1] + ", " + px.data[i * 4 + 2] + ")";
displayCtx.fillRect((i % width) * xScale, (i / height | 0) * yScale, xScale, yScale);
}
}
I’ve also reworked some of it to be clearer, and to allow you to easily change the buffer width and height from 80x80 to any other dimension you might wish to experiment with, or the canvas width and height in the HTML to anything you may desire.
Spent the day at it, but not with such an excellent result as you provided above. Impressive!
I tested in FF and IE, and it works in both on the desktop.
When I uploaded it and tried it using Chrome on an Android device, got a blank screen. (Ugh)
Also because it is constantly refreshing, when viewed in FF on an Android device, it stays at full screen even if pinched (it will get smaller while pinched and held, but once you stop pinching/touching the screen, it resumes its full screen display). So, I’ll keep trying to dissect the script, see if I can apply any fixes for these, especially the full screen issue.
Again, thank you very much for your help. Brilliant!
Tried adding this to the JS, but so far when I view on a mobile FF browser, will not cancel full screen even with this script. I think the constant refreshing keeps causing the window to go to full screen?