Pixel Canvas

Testing imageSmoothingEnabled property

by soulwire

HTML

<script src="https://rawgithub.com/soulwire/sketch.js/master/js/sketch.js"></script>
<p>Hurrah for <code>imageSmoothingEnabled</code></p>
<label><input id="pixelate" checked="true" type="checkbox"/>Pixelated</label>
<div id="container"></div>

JavaScript

var rotation = 0;
var container = document.getElementById( 'container' );
var pixelate = document.getElementById( 'pixelate' );

var src = Sketch.create({
    
    container: container,
    fullscreen: false,
    height: 20,
    width: 20,
    
    rect: function( w, h ) {
        
        w /= 2, h /= 2;
        
        this.beginPath();
        this.moveTo( -w, -h );
        this.lineTo( w, -h );
        this.lineTo( w, h );
        this.lineTo( -w, h );
        this.closePath();
        this.fill();
    },
    
    draw: function() {
        
        this.save();
        this.translate( this.width/2, this.height/2 );
        this.rotate( rotation += 0.02 );
        this.fillStyle = 'red';
        this.rect( 10, 10 );
        this.restore();
    }
});

Sketch.create({
    
    container: container,
    fullscreen: false,
    height: 500,
    width: 500,
    
    draw: function() {
        
        this.webkitImageSmoothingEnabled =
        this.mozImageSmoothingEnabled =
        this.oImageSmoothingEnabled =
        this.imageSmoothingEnabled =
            !pixelate.checked;
        
        this.drawImage( src.canvas, 0, 0, this.width, this.height );
    }
});