Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE HTML>
<html>
    <head>
        <style>
            body {
                margin: 0px;
                padding: 0px;
            }
            
            #myCanvas {
                border: 1px solid #9C9898;
            }
        </style>
        <script>           
            window.onload = function(){
                var canvas = document.getElementById("myCanvas");
                var context = canvas.getContext("2d");
                
               
                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);
                context.closePath(); // complete custom shape
                
                // add linear gradient
                // TRY TO CHANGE THE PARAMETERS NEXT LINE !
                var grd = context.createLinearGradient(0, 0, 370, 0);
              
                // Try adding colors with first parameter between 0 and 1
                grd.addColorStop(0, "#8ED6FF"); // light blue
                // Try uncommenting next line
              //grd.addColorStop(0.5, "#FF0000");
                grd.addColorStop(1, "#004CB3"); // dark blue
                context.fillStyle = grd;
              
                context.fill();
                
                // add stroke
                context.lineWidth = 5;
                context.strokeStyle = "#0000ff";
                context.stroke();
              
              // TRY UNCOMMENTING THIS LINE
                //context.fillRect(0,0, 578,200);
            };
        </script>
    </head>
    <body onmousedown="return false;">
        <canvas id="myCanvas" width="578" height="200">
        </canvas>
    </body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers