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. Go to the editor]

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

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

3. Write a JavaScript program to draw two intersecting rectangles, one with Alpha transparency.
Expected Output :
intersecting rectangles
Click me to see the solution

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

5. Write a JavaScript program to draw the following diagram [use the moveto() function].
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].
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

Parse an HTTP Cookie header string and return an object of all cookie name-value pairs

Example:

const parseCookie = str =>
  str
    .split(';')
    .map(v => v.split('='))
    .reduce((acc, v) => {
      acc[decodeURIComponent(v[0].trim())] = decodeURIComponent(v[1].trim());
      return acc;
    }, {});
console.log(parseCookie('foo=bar; equation=E%3Dmc%5E2')); // { foo: 'bar', equation: 'E=mc^2' }

Output:

[object Object] {
  equation: "E=mc^2",
  foo: "bar"
}

 

We are closing our Disqus commenting system for some maintenanace issues. You may write to us at reach[at]yahoo[dot]com or visit us at Facebook