canvas

by fangunxs

HTML

<canvas id="drawing" width="200" height="200" style="border:1px solid #000000;">A drawing of something.</canvas>

JavaScript

var drawing = document.getElementById('drawing');
if(drawing.getContext){
    var ctx = drawing.getContext('2d');
/*    ctx.fillStyle="#FF0000";
    ctx.fillRect(10,10,50,50);
    //ctx.strokeStyle = "red";
    ctx.fillStyle = "rgba(0,0,255,0.5)";
    ctx.fillRect(30,30,50,50);
    
    ctx.clearRect(40,40,10,10);
    
    ctx.strokeStyle = "#ff0000";
    ctx.strokeRect(10,100,50,50);
    
    ctx.strokeStyle = 'rgba(0,0,255,0.5)';
    ctx.strokeRect(30,130,50,50);*/
    
    ctx.beginPath();
    ctx.arc(100,100,99,0,2*Math.PI,false);
    ctx.moveTo(194,100);
    ctx.arc(100,100,94,0,2*Math.PI,false);
    ctx.moveTo(100,100);
    ctx.lineTo(100,15);
    ctx.moveTo(100,100);
    ctx.lineTo(35,100);
    ctx.stroke();
    /*if(ctx.isPointInPath(1000,100)){
        alert("Yes");
    }else{alert('no');}*/
    
    ctx.font = 'bold 14px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('12',100,20);
    
    ctx.textAlign = 'start';
    ctx.fillText('13',100,40);
    
    ctx.textAlign = 'end';
    ctx.fillText('14',100,60);
}