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.



Follow us on Facebook and Twitter for latest update.

JavaScript: Tips of the Day

Using the spread operator to combine objects

Let's say you want to combine multiple objects into one object containing them all.
The spread operator ( _ ) is a great way to achieve this!

const obj1 = {'a': 1, 'b': 2}
const obj2 = {'c': 3}
const obj3 = {'d': 4}
// Combine them using the spread operator            
const objCombined = {...obj1, ...obj2, ...obj3}
// Result: {'a': 1, 'b': 2, 'c': 3, 'd': 4}

Something to keep in mind while using this is that whenever you update one of the objects, it doesn't reflect those changes in the combined object.

Ref: https://bit.ly/2LBj213