Canvas drawing app change color and pen size with javascript and html5

Question

I've been working with the JavaScript/html5/css code from zipso.net I am trying to add a drop down menu where I can change the rgb color values, as zipso had stated was possible in response to a question posted by "feryal" in the zipso.net message board at the bottom of the page in the link.

Here is the part of the JavaScript code that has the rgb values.

The dropdown menu options that I would like to have are. "blue" r=50; g=50; b=250; a=100; "green" r=50; g=250; b=50; a=100; "red" r=250; g=50; b=50; a=100; "black" r=0; g=0; b=0; a=255;

 // Draws a dot at a specific position on the supplied canvas name // Parameters are: A canvas context, the x position, the y position, the size of the dot function drawDot(ctx,x,y,size) { // Let's use black by setting RGB values to 0, and 255 alpha (completely opaque) r=0; g=0; b=0; a=255; // Select a fill style ctx.fillStyle = "rgba("+r+","+g+","+b+","+(a/255)+")"; // Draw a filled circle ctx.beginPath(); ctx.arc(x, y, size, 0, Math.PI*2, true); ctx.closePath(); ctx.fill(); } 

By the way I would also like to use a drop down menu to change the pen size as well. It says that you can do so by changing every instance of 12 in the code. The following has every instance of 12 in the code. The options that I would like to have in the dropdown menu are 3, 6, and 12.

  // Keep track of the mouse button being pressed and draw a dot at current location function sketchpad_mouseDown() { mouseDown=1; drawDot(ctx,mouseX,mouseY,12); } // Draw a dot if the mouse button is currently being pressed if (mouseDown==1) { drawDot(ctx,mouseX,mouseY,12); } } // Draw something when a touch start is detected function sketchpad_touchStart() { // Update the touch co-ordinates getTouchPos(); drawDot(ctx,touchX,touchY,12); // Prevents an additional mousedown event being triggered event.preventDefault(); } // Draw something and prevent the default scrolling when touch movement is detected function sketchpad_touchMove(e) { // Update the touch co-ordinates getTouchPos(e); // During a touchmove event, unlike a mousemove event, we don't need to check if the touch is engaged, since there will always be contact with the screen by definition. drawDot(ctx,touchX,touchY,12); // Prevent a scrolling action as a result of this touchmove triggering. event.preventDefault(); } 

Answer 1

Take a global variable, and on dropdown select change the value. I took slider, Here is a Demo

 // Variables for referencing the canvas and 2dcanvas context var canvas,ctx,size = 10,r=0,g=0,b=0; // Variables to keep track of the mouse position and left-button status var mouseX,mouseY,mouseDown=0; // Draws a dot at a specific position on the supplied canvas name // Parameters are: A canvas context, the x position, the y position, the size of the dot function drawDot(ctx,x,y,size) { // Select a fill style ctx.fillStyle = 'rgb('+r+','+g+','+b+')'; // Draw a filled circle ctx.beginPath(); ctx.arc(x, y, size, 0, Math.PI*2, true); ctx.closePath(); ctx.fill(); } // Clear the canvas context using the canvas width and height function clearCanvas(canvas,ctx) { ctx.clearRect(0, 0, canvas.width, canvas.height); } // Keep track of the mouse button being pressed and draw a dot at current location function sketchpad_mouseDown() { mouseDown=1; drawDot(ctx,mouseX,mouseY,size); } // Keep track of the mouse button being released function sketchpad_mouseUp() { mouseDown=0; } // Keep track of the mouse position and draw a dot if mouse button is currently pressed function sketchpad_mouseMove(e) { // Update the mouse co-ordinates when moved getMousePos(e); // Draw a dot if the mouse button is currently being pressed if (mouseDown==1) { drawDot(ctx,mouseX,mouseY,size); } } // Get the current mouse position relative to the top-left of the canvas function getMousePos(e) { if (!e) var e = event; if (e.offsetX) { mouseX = e.offsetX; mouseY = e.offsetY; } else if (e.layerX) { mouseX = e.layerX; mouseY = e.layerY; } } // Set-up the canvas and add our event handlers after the page has loaded function init() { // Get the specific canvas element from the HTML document canvas = document.getElementById('sketchpad'); // If the browser supports the canvas tag, get the 2d drawing context for this canvas if (canvas.getContext) ctx = canvas.getContext('2d'); // Check that we have a valid context to draw on/with before adding event handlers if (ctx) { canvas.addEventListener('mousedown', sketchpad_mouseDown, false); canvas.addEventListener('mousemove', sketchpad_mouseMove, false); window.addEventListener('mouseup', sketchpad_mouseUp, false); } } function setR(){ r = document.getElementById("colorR").value; } function setG(){ g = document.getElementById("colorG").value; } function setB(){ b = document.getElementById("colorB").value; } function setSize(){ size = document.getElementById("sizeSelect").value; } init(); 

 /* Some CSS styling */ #sketchpadapp { /* Prevent nearby text being highlighted when accidentally dragging mouse outside confines of the canvas */ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .leftside { float:left; width:220px; background-color:#def; padding:10px; border-radius:4px; } .rightside { float:left; margin-left:10px; } #sketchpad { float:left; border:2px solid #888; border-radius:4px; position:relative; /* Necessary for correct mouse co-ords in Firefox */ } 

 <div id="sketchpadapp"> <div class="leftside"> Simple mouse-based HTML5 canvas sketchpad.<br/><br/> Draw something by holding down the mouse button or using single clicks.<br/><br/> On a touchscreen, tapping the area will register as a single mouse click.<br/><br/> <input type="submit" value="Clear Sketchpad" onclick="clearCanvas(canvas,ctx);"><br> R<input type="range" id='colorR' min="0" max="255" value = '0' onchange='setR();'><br> G<input type="range" id='colorG' min="0" max="255" value = '0' onchange='setG();'><br> B<input type="range" id='colorB' min="0" max="255" value = '0' onchange='setB();'><br> size:<input type="range" id='sizeSelect' min="5" max="50" value = '10' step="5" onchange='setSize();'> </div> <div class="rightside"> <canvas id="sketchpad" height="350" width="450"> </canvas> </div> </div>