cloud drawing

by Gustavo Carvalho

HTML

<canvas id="canvas" width=420 height=300></canvas>
<br>
<button id="light">Redraw as Light Cloud</button>
<button id="dark">Redraw as Dark Cloud</button>

CSS

body {
            background-color: ivory;
        }
        canvas {
            border:1px solid red;
        }

JavaScript

var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");

        var img = new Image();
        img.onload = function () {
            redraw("transparent");
        }
        img.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/skyGrass.png";


        function redraw(fill) {
            console.log("start");
            context.beginPath();
            // redraw the background image
            context.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
            // redraw the cloud
            context.moveTo(170, 80);
            context.bezierCurveTo(130, 100, 130, 150, 230, 150);
            context.bezierCurveTo(250, 180, 320, 180, 340, 150);
            context.bezierCurveTo(420, 150, 420, 120, 390, 100);
            context.bezierCurveTo(430, 40, 370, 30, 340, 50);
            context.bezierCurveTo(320, 5, 250, 20, 250, 50);
            context.bezierCurveTo(200, 5, 150, 20, 170, 80);

            // complete custom shape
            context.closePath();
            context.lineWidth = 5;
            context.strokeStyle = 'blue';
            context.fillStyle = fill;
            context.stroke();
            context.fill();
            console.log(fill);
        }

        $("#light").click(function () {
            redraw("white");
        })
         $("#dark").click(function () {
            redraw("gray");
        })