Drawing

Canvas is a JavaScript drawing library, you can use to draw in the browser or in NodeJS

const Canvas = require('canvas')
const canvas = new Canvas(200,200)
const ctx = canvas.getContext('2d')

ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);
canvas.toDataURL()

You can use the canvas module to draw and just call canvas.toDataURL() to output to the screen. (see below)

var Canvas = require('canvas')
  , Image = Canvas.Image
  , canvas = new Canvas(200, 200)
  , ctx = canvas.getContext('2d');

ctx.font = '30px Impact';
ctx.rotate(.1);
ctx.fillText("Awesome!", 50, 100);
var te = ctx.measureText('Awesome!');
ctx.strokeStyle = 'rgba(0,0,0,0.5)';
ctx.beginPath();
ctx.lineTo(50, 102);
ctx.lineTo(50 + te.width, 102);
ctx.stroke();
canvas.toDataURL()

1. Write a JavaScript program to draw the following rectangular shape.

Expected Output :

const Canvas = require('canvas')
const canvas = new Canvas(200,200)
const ctx = canvas.getContext('2d')

2. Write a JavaScript program to draw a circle.

Expected Output :

const Canvas = require('canvas')
const canvas = new Canvas(200,200)
const ctx = canvas.getContext('2d')

3. Write a JavaScript program to draw two intersecting rectangles, one of which has alpha transparency.

Expected Output :

const Canvas = require('canvas')
const canvas = new Canvas(200,200)
const ctx = canvas.getContext('2d')

4. Write a JavaScript program to draw the following right-angled triangle.

Expected Output :

const Canvas = require('canvas')
const canvas = new Canvas(200,200)
const ctx = canvas.getContext('2d')

5. Write a JavaScript program to draw the following diagram [use moveto() function].

Expected Output :

const Canvas = require('canvas')
const canvas = new Canvas(200,200)
const ctx = canvas.getContext('2d')

6. Write a JavaScript program to draw the following diagram [diagonal, white to black circles].

Expected Output :

const Canvas = require('canvas')
const canvas = new Canvas(200,200)
const ctx = canvas.getContext('2d')

Index