JSFiddle - React, Tailwind, and code Playground

by mirontoli

HTML

<!DOCTYPE HTML>    
<html>
    <head>
        <!-- testing canvas -->
        <!-- credits: 
        http://weblogs.asp.net/mikaelsoderstrom/archive/2010/09/15/kom-ig-229-ng-med-html5-canvas.aspx
        and
        http://diveintohtml5.org/canvas.html#divingin
        -->
        <title>Canvas</title>
    </head>   
    <body>      
        <div>   
            <canvas id="canvas" width="400" height="400"> 
                Din webbläsare har inte stöd för canvas.  
            </canvas>   
        </div> 
    </body> 
</html>

CSS

body{
    background-color: #000;
    text-align:  center;
}
div{  
    margin: 0px auto;
    width: 400px;
}
canvas            {
    background-color: #fff;             
}

JavaScript

init();

var position = 75;

function init() {
    drawImage();
    setInterval(function () { drawImage(); }, 500);
}

function drawImage() {
    var c = document.getElementById('canvas');
    var ctx = c.getContext('2d');
    var grad = ctx.createLinearGradient(0, 0, 400, 400);
    grad.addColorStop(0, '#FFFFFF');
    grad.addColorStop(0.5, '#00FF00');
    grad.addColorStop(1, '#FFFFFF');
    ctx.fillStyle = grad;
    ctx.fillRect(0, 0, 400, 400);
    //ctx.shadowOffsetX = 3;
    //ctx.shadowOffsetY = 3;
    //ctx.shadowBlur = 5;
    //ctx.shadowColor = 'rgba(0, 0, 0, 0.7)';
    //ctx.fillStyle = 'rgba(0, 0, 255, 0.3)';
    //ctx.fillRect(position, position, 200, 200);
    position = (position == 25) ? 75 : 25;
    
    
    var cat = new Image();
    //cat.src = "http://c.wearehugh.com/dih5/openclipart.org_media_files_johnny_automatic_1360.png";
    cat.src = "http://www.sacbee.com/static/weblogs/health-and-fitness/Maggie_Simpson.png"
    cat.onload = function() {
        ctx.drawImage(cat, position, position);
    };
}