Javascript paint Canvas, need help re-locating buttons?

Question

Hi i'm having trouble getting my paint canvas buttons that change the colours of the paint brush to move beside the canvas. It seems to be stuck at the tope left hand corner of the webpage unfortunately and i'm struggling trying to re-locate it. And suggestions would be very helpful. Thank you. Here is some of my code that should give you an idea of what im talking about. var brush = 10;

function changeColour(colour)
{
g.fillStyle = colour;
}

function clearCanvas()
{
g.clearRect(0, 0, canvas.width, canvas.height);
}
var mouseIsDown = false;
function down(e)
{
mouseIsDown = true;
/*e.originalEvent.preventDefault();*/
}
function up(e)
{
mouseIsDown = false;
}
function changeBrushSize(symbol)
{
    if(symbol =='+')
    {
        brush = brush + 2;
    }

    else if (symbol == '-')
    {
        brush = brush - 2;
    }
}
function move(e) 
{
    var container = document.getElementById('container');
//g.clearRect(0, 0, canvas.width, canvas.height);
//g.fillRect(e.x - 5, e.y - 5, 100, 100);
if((e.button == 0) && (mouseIsDown))
{ 

g.beginPath();
document.onselectstart = function(){ return false; }
//g.fillStyle = "red";
g.arc((e.x - container.offsetLeft) - brush, (e.y - container.offsetTop) - brush, brush, 0, Math.PI * 2);
g.fill();
g.closePath();
}
}
</script>
</head>
<body>
<div id="container">
<canvas id = "paintCanvas" width = "500" height = "500">
Your browser does not support the HTML5 <canvas> tag.
</canvas>
</div>

<button onclick ="clearCanvas()">Clear Canvas</button></br>
<button onclick ="changeColour('red')">Red</button>
<button onclick ="changeColour('green')">Green</button>
<button onclick ="changeColour('blue')">Blue</button>
<button onclick ="changeColour('yellow')">Yellow</button>
<button onclick ="changeColour('orange')">Orange</button>
<button onclick ="changeColour('brown')">Brown</button>
<button onclick ="changeColour('purple')">Purple</button></br>

<button onclick ="changeBrushSize('+')">Bigger Brush</button>
<button onclick ="changeBrushSize('-')">Smaller Brush</button>
</body>

markE · Answer 1 · 2013-12-09T21:12:40.787

You might let the user select their colors and other tools from a second "tools" canvas

enter image description here

Then position the "tools" canvas before the "drawing" canvas.

<canvas id="toolsCanvas"></canvas><br>
<canvas id="drawingCanvas"></canvas>

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/y5xu7/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: white; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("drawingCanvas");
    var context=canvas.getContext("2d");

    var tools=document.getElementById("toolsCanvas");
    var ctx=tools.getContext("2d");
    var canvasOffset=$("#toolsCanvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    var colors=['Red','Green','Blue','Yellow','Orange','Brown','Purple']
    var lightcolors="Yellow|White";
    var colorPickerWidth=25;

    // draw the color picker
    tools.width=colors.length*colorPickerWidth;
    for(var i=0;i<colors.length;i++){
        ctx.fillStyle=colors[i];
        ctx.fillRect(i*colorPickerWidth,0,colorPickerWidth,25);
    }


    // called when the user clicks and picks a color
    function handleMouseDown(e){
    console.log("down");
      var x=parseInt(e.clientX-offsetX);
      var color=colors[parseInt(x/colorPickerWidth)];
      ctx.save();
      ctx.fillStyle=color;
      ctx.fillRect(0,28,tools.width,25);
      ctx.fillStyle="white";
      if(lightcolors.indexOf(color)>-1){ctx.fillStyle="black";}
      ctx.font="16px verdana";
      ctx.fillText("Selected: "+color,10,45);
      ctx.restore();

      context.clearRect(0,0,canvas.width,canvas.height);
      context.fillStyle=color;
      context.font="14px arial";
      context.fillText("fillStyle==your selected color",30,100);
    }

    $("#toolsCanvas").mousedown(function(e){handleMouseDown(e);});


}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="toolsCanvas" width=300 height=53></canvas><br>
    <canvas id="drawingCanvas" width=300 height=300></canvas>
</body>
</html>

Javascript paint Canvas, need help re-locating buttons?

1 Answers1

Linked