2d drawing

function demoLines(){
    var canvas = document.
        getElementById('lineCanvas');
    var ctx = canvas.getContext('2d');      
    
    ctx.lineWidth = 1; 
    ctx.strokeStyle = 'black';
    
    // single line
    ctx.beginPath();      
    ctx.moveTo(15, 15);    // start point
    ctx.lineTo(100, 100);  // end point
    ctx.stroke();    
    
    // broken line 
    // can be used for drawing graph
    ctx.beginPath();      
    ctx.moveTo(15, 100);    
    ctx.lineTo(40, 140);  
    ctx.lineTo(60, 140);  
    ctx.lineTo(80, 180);  
    ctx.lineTo(90, 200);  
    ctx.stroke();    
}

function demoRectangles(){
    var canvas = document.
        getElementById('rectanglesCanvas');
    var ctx = canvas.getContext('2d');      
    
    ctx.rect(0, 0, 50, 50);
    ctx.fillStyle = 'red';
    ctx.fill(); // ctx.stroke();
    
    ctx.strokeStyle= 'blue';
    ctx.strokeRect(50, 0, 100, 50); 
    
    ctx.fillRect(50, 50, 100, 100);
}

CanvasRenderingContext2D.prototype.roundRect = 
    function (x, y, w, h, r = 10) {
  if (w < 2 * r) r = w / 2;
  if (h < 2 * r) r = h / 2;
  this.beginPath();
  this.moveTo(x+r, y);
  this.arcTo(x+w, y, x + w, y + h, r);
  this.arcTo(x+w, y+h, x, y + h, r);
  this.arcTo(x, y + h, x, y, r);
  this.arcTo(x, y, x + w, y, r);
  this.closePath();
} 
// ...        
ctx.lineWidth = 1; 
ctx.strokeStyle = 'blue'
ctx.roundRect(10, 10, 50, 50); 
ctx.stroke();

function demoCircles(){
    var canvas = document.
        getElementById('circlesCanvas');
    var ctx = canvas.getContext('2d');      
    
    ctx.beginPath();
    // angle from 0 to 2*Math.PI = circle
    ctx.arc(50, 50, 40, 0, 2*Math.PI, false);
    ctx.closePath();
    ctx.lineWidth = 5;
    ctx.fillStyle = 'red';
    ctx.fill();
    ctx.strokeStyle = '#550000';
    ctx.stroke();
    
    ctx.lineWidth = 1;
    ctx.strokeStyle = 'black';
    
    // arc, don't close path
    ctx.beginPath();
    ctx.arc(150, 50, 40, 0, -Math.PI/2, false);
    ctx.stroke();
    
    // segment, here we close path
    ctx.beginPath();
    ctx.arc(50, 150, 40, 0, 
         2*Math.PI-Math.PI/2, true);
    ctx.closePath();
    ctx.stroke();
    
    // pie slice
    ctx.beginPath();
    ctx.moveTo(150, 150); 
    ctx.arc(150, 150, 40, 0, Math.PI/3); 
    ctx.closePath(); // or ctx.lineTo(150, 150);
    ctx.stroke();
}

function demoEllipse(){
    var canvas = document
        .getElementById('ellipseCanvas');
    var ctx = canvas.getContext('2d');  

    ctx.lineWidth = 1;
    ctx.strokeStyle = 'black';  
    
    ctx.beginPath();
    ctx.ellipse(100, 50, 80, 20,
        0, 0, 2*Math.PI);
    ctx.stroke();
    
    ctx.beginPath();
    ctx.ellipse(100, 150, 80, 20,
        Math.PI/4,0,2*Math.PI);
    ctx.stroke();
}    

function demoShadow(){
    var canvas = document.
        getElementById('shadowCanvas');
    var ctx = canvas.getContext('2d');      
    
    ctx.rect(20, 20, 50, 50);
    ctx.fillStyle = 'red';
    ctx.shadowColor = '#999';
    ctx.shadowBlur = 20;
    ctx.shadowOffsetX = 15;
    ctx.shadowOffsetY = 15;
    ctx.fill();
}

<canvas style="border: 1px solid black;" 
    width="200" height="200" 
    id="imageCanvas">
Canvas not supported </canvas> <br>

<a href="" download="canvas.jpg" 
   onclick = "this.href = document
                 .getElementById('imageCanvas')
                 .toDataURL('image/jpg')"
   >dowload canvas as image</a>    
var canvas = document
    .getElementById('imageCanvas');
var ctx = canvas.getContext('2d');  

// create <img> element
var img = new Image(); // new Image(width, height);

// what to do when image will be loaded    
img.onload = function(){
  // draws image in the specified rectangle on canvas
  // image will be scaled  
  ctx.drawImage(this,0,0,100,100);  
  // draws sub-image in the specified rectangle on canvas
  ctx.drawImage(this, 50,50,40,40,101,101,100,100);  
};

img.src = 'https://socode4.com/images/cyclist.png'; 

function demoPixels(){        
var canvas = document.getElementById("pixelsCanvas");
var ctx = canvas.getContext("2d");
var imgData = ctx.createImageData(50, 50); // empty

// fill pixels by red value    
var i;    
for (i = 0; i < imgData.data.length; i += 4) {
  imgData.data[i+0] = 255; // red component
  imgData.data[i+1] = 0; // green component
  imgData.data[i+2] = 0; // blue component
  imgData.data[i+3] = 255; // transparency
}
   
// draw pixels    
ctx.putImageData(imgData, 25, 25);
}