Drooodle Wiki
Advertisement

How to change colors and transparency (If you haven't acquired Pooodle).

Inspect Element is a method of adding extra features to Drooodle by using codes. Because of Pooodle, created by haicat, all of this can be done easier.

Changing Colors[]

  1. When in the canvas, right click any color, then click inspect element.
  2. A pop-out menu will appear with a small square with the color you right clicked in it. Click this square.
  3. A smaller pop-out menu will appear with a colorizer in it and a small scroller at the bottom.
  4. The scroller controls the opacity. Changing the color to black and changing the opacity is good for shading.

These instructions apply to all of the most common web browsers.

Transparency[]

  • In order to do this, you right click on the canvas.
  • Click inspect element.
  • When the hexadecimal colors shows up, you will see an adjustment with a word 'transparency' in the left side.
  • Adjust into any transparency.

Adding Images[]

The following instruction are written with the Mozilla Firefox web browser in mind, but this is possible in Google Chrome.

Images may be added to your drooodle from image hosting websites such as imgur

To do so you:

Screen Shot 2015-01-17 at 2.35.41 PM.png

  • Right click on your canvas
  • Click on Inspect Element
  • Click on the tab labelled console
  • Insert the following code after editing the section labelled URL, which should be a link to your chosen image.

Syntax:

var canvas = document.getElementById('canvas1');

var context = canvas.getContext('2d');

var imageObj = new Image();

imageObj.onload = function() {context.drawImage(imageObj, X coordinates, Y coordinates, image width, image height);};

imageObj.crossOrigin="Anonymous";

imageObj.src = "URL"

As a working example:

var canvas = document.getElementById('canvas1');

var context = canvas.getContext('2d');

var imageObj = new Image();

imageObj.onload = function() {context.drawImage(imageObj, 0, 0);};

imageObj.crossOrigin="Anonymous";

imageObj.src = "http://i.imgur.com/9Y6guSd.png"

  • When you return to your drooodle you should now see your selected image.
  • if you want to change the position, change the numbers in "{ context.drawImage(imageObj, 0, 0); }" to the X and Y coordinates.
  • Edit the third and fourth parameters to change respectively the image width and the image height.
  • If you want the image to fill the entire canvas put in the third parameter: canvas.width, and in the fourth: canvas.height
  • To get a custom image, such as a drawing thats already on drooodle, simply upload it to imgur, do the copy/paste trick, and delete the image

For additional canvas methods and properties visit: http://www.w3schools.com/tags/ref_canvas.asp and: http://www.w3schools.com/canvas/[]

Advertisement