JavaScript on a page

Fri 28 October 2016
Category: meta
<canvas id="canvas" width="360" height="360" style="border:2px solid #d3d3d3;">canvas not supported</canvas>

<script type="text/javascript">

function draw() {
  var canvas = document.getElementById("canvas");
  if (canvas.getContext) {
    var ctx = canvas.getContext("2d");

    ctx.fillStyle = "rgb(200,0,0)";
    ctx.fillRect (10, 10, 50, 50);

    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
    ctx.fillRect (30, 30, 50, 50);
  }
}

draw();

function sin() {

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

  for(x=0; x<360; x += 20){
      ctx.moveTo(x+5,180);
      ctx.lineTo(x,180);
  }

  ctx.moveTo(0,180);

  for(x=0; x<=360; x+=1){
      y = 180 - Math.sin(x*Math.PI/180)*180;
      ctx.lineTo(x,y);
  }
  ctx.stroke();

}

sin()

</script>
canvas not supported

Category: meta Tagged: pelican todo

Comments