w3resource

JavaScript drawing - Exercises, Practice, Solution

JavaScript drawing [6 exercises with solution]

[An editor is available at the bottom of the page to write and execute the scripts.]

1. Write a JavaScript program to draw the following rectangular shape. Go to the editor
Expected Output :
rectagular shape
Click me to see the solution

2. Write a JavaScript program to draw a circle. Go to the editor
Expected Output :
draw a circle
Click me to see the solution

3. Write a JavaScript program to draw two intersecting rectangles, one of which has alpha transparency. Go to the editor
Expected Output :
intersecting rectangles
Click me to see the solution

4. Write a JavaScript program to draw the following right-angled triangle. Go to the editor
Expected Output :
right angled triangle
Click me to see the solution

5. Write a JavaScript program to draw the following diagram [use moveto() function]. Go to the editor
Expected Output :
draw fun
Click me to see the solution

6. Write a JavaScript program to draw the following diagram [diagonal, white to black circles]. Go to the editor
Expected Output :
diagonal, white to black circles
Click me to see the solution

More to Come !

* To run the code mouse over on Result panel and click on 'RERUN' button.*

Live Demo:

See the Pen javascript-common-editor by w3resource (@w3resource) on CodePen.


Do not submit any solution of the above exercises at here, if you want to contribute go to the appropriate exercise page.



JavaScript: Tips of the Day

Regular functions

function giveOwenBurger() {
  return 'Here is burger!';
}

const giveOwenCocacola = () =>
  "Here's cocacola... now go hit the gym already.";

console.log(giveOwenBurger.prototype);
console.log(giveOwenCocacola.prototype);

Regular functions, such as the giveOwenPizza function, have a prototype property, which is an object (prototype object) with a constructor property. Arrow functions however, such as the giveOwenCocacola function, do not have this prototype property. undefined gets returned when trying to access the prototype property using giveOwenCocacola.prototype.

Ref: https://bit.ly/3jFRBje