CODEWITHSUNDEEP
javascripthtmlcanvas
saratogacoach
saratogacoach

Reputation: 160

Re-write javascript animation to prevent scaling/blurring in browser

I have limited scripting skills and am stuck trying to re-write a small script for an eLearning lesson animation.

With help, a few years ago (no longer available), ported an AS3 animation to JS. When the JS is tested/run in FF, IE or Chrome, it is blurry.

The script, from what little I can understand, is drawing in a canvas using 1x1 px rectangles for the animation. This is causing scaling, blurring and distortion.

I am not sure how to re-write the JavaScript for the canvas drawing so that it uses the correct size rectangles (8x8 pixels instead of 1x1 pixels)?

I think once that is changed from 1x1 to 8x8, then the canvas sizes in the script, index.html and style.css may need to be changed, to match (the final size should be 640X640)?

Any help appreciated with re-writing (I've tried everything I know, but no success).

Link (index.html, src.js, style.css):
https://elearningprojects.com/websample1/index.html

Upvotes: 0

Views: 270

Answers (2)

Timothy Groote
Timothy Groote

Reputation: 8643

The canvas is just 80x80 pixels. Your CSS is scaling it up to 640x480, meaning you just stretch the bitmap you're drawing to the canvas. (this explains your blurriness)

The trick to achieving your scaling is here : 

var scaleFactor = 10;
for(i = 0; i < 6400; i++)
{
    d = random()*256|0;
    val = array[d];
    viewbmd.fillStyle = "rgb(" + val + ", " + val + ", " + val + ")";
    //fillrect draws your "pixels", 
    viewbmd.fillRect(i%80*scaleFactor, (((i)/80)|0)*scaleFactor , scaleFactor, scaleFactor); 
}

In order to emulate drawing bix pixels, you multiply the x/y position of the rectangles you draw with the same number that determines their size (see scaleFactor).

In the example, i'm drawing "pixels" that are actually 10x10 "points".

This way, the initial picture is drawn correctly.

We run into trouble though, the second we hit flipSomePixels, because it just takes actual pixels from the bitmap we drew earlier, and starts flipping those, so we will need a similar trick to draw the updated fake pixel there.

::update::

Thanks to Ken, i got an idea on how to achieve this in an "easier" way. We can draw the original 80x80 canvas off screen, and stretch that across a bigger canvas.

We still need to do away with the css canvas resizing though, because resizing the canvas element will still cause the blurry scaling to happen. Instead, we make the canvas 640x640 and tell it to do crisp image rendering like this:

-css:

canvas{
    border:1px solid black;
    image-rendering: optimizeSpeed;             
    image-rendering: -moz-crisp-edges;          
    image-rendering: -webkit-optimize-contrast; 
    image-rendering: -o-crisp-edges;            
    image-rendering: optimize-contrast;         
    -ms-interpolation-mode: nearest-neighbor;   
}

-html:

<canvas width="640" height="640"></canvas>

For a working example, see http://jsfiddle.net/QTvpe/10/

Upvotes: 3

user1693593
user1693593

Reputation:

I am not sure if this is what you try to achieve as the images are vastly enlarged but, you can try to turn off anti-aliasing of the images. This will give you the 8-bit look from old days if that is what you're looking for.

context.webkitImageSmoothingEnabled = false;

and for Mozilla:

context.mozImageSmoothingEnabled = false;

Also see my related answer here for full context:
Images in web browser are slightly blurred. How to disable it?

Upvotes: 1

Related Questions