Search code examples
javascripthtmlhtml5-canvaspaintcomponent

How to give a colour to particular div by selecting a colour in html5

I am an intermediate in javascript. I am making an app for children .. I am developing in it HTML5/javascript. My app motive is to select the letter and practice them by sketching the outline of letters.. Here is my app design in below pictureenter image description here

In the app I want to select the color of the required one from the colour given in pencil and paint in the outline of A. and I have to erase with the eraser given.. I had almost finished the app except the colouring part.. Please anyone help and guide me how to do this.. I just want to know how to make this to colour outline by selecting the colours.. if there any code available or demo available please tell me about that. Experts shed light on this problem

Solution

  • [Revised answer based on changed request]

    Here’s how to let the child draw anywhere within a bounding box around the letter

    First, define the area that the drawing will be restricted to.

    Any drag-draws outside the drawable area won't be visible.

        // define the drawable area
    var minX=60;
    var maxX=250;
    var minY=140;
    var maxY=380;

    Then in mousemove, draw only if the mouse is inside that drawable area:

            if(mouseX>minX && mouseX<maxX && mouseY>minY && mouseY<maxY){
            ctx.beginPath();
            ctx.moveTo(startX,startY);
            ctx.lineTo(mouseX,mouseY);
            ctx.stroke();
        }

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

    <!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: ivory; }
    #wrapper{
        position:relative;
        width:637px;
        height:477px;
    }
    #canvas,#bkImg{
        position:absolute; top:0px; left:0px;
        border:1px solid green;
        width:100%;
        height:100%;
    }
    #canvas{
        border:1px solid red;
    }
</style>

<script>
$(function(){

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

    ctx.strokeStyle="red";
    ctx.lineWidth=25;
    ctx.lineCap="round";

    // define the drawable area
    // any drag-draws outside the drawable area won't be visible
    var minX=60;
    var maxX=250;
    var minY=140;
    var maxY=380;

    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    var startX;
    var startY;
    var isDown=false;

    function handleMouseDown(e){
      startX=parseInt(e.clientX-offsetX);
      startY=parseInt(e.clientY-offsetY);
      isDown=true;
    }

    function handleMouseUp(e){
      if(!isDown){return;}
      isDown=false;
    }

    function handleMouseMove(e){
        if(!isDown){return;}
        mouseX=parseInt(e.clientX-offsetX);
        mouseY=parseInt(e.clientY-offsetY);
        if(mouseX>minX && mouseX<maxX && mouseY>minY && mouseY<maxY){
            ctx.beginPath();
            ctx.moveTo(startX,startY);
            ctx.lineTo(mouseX,mouseY);
            ctx.stroke();
        }
        startX=mouseX;
        startY=mouseY;
    }

    $("#canvas").mousedown(function(e){handleMouseDown(e);});
    $("#canvas").mousemove(function(e){handleMouseMove(e);});
    $("#canvas").mouseup(function(e){handleMouseUp(e);});
    $("#canvas").mouseout(function(e){handleMouseOut(e);});

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

</head>

<body>
    <div id="wrapper">
        <img id="bkImg" src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/game1.png" width=637 height=477>
        <canvas id="canvas" width=637 height=477></canvas>
    </div>
</body>
</html>

    [ Original answer ]

    How to draw lines on a canvas in a selected color

    enter image description here

    Here is some code for you to start with.

    The important points are:

    • Mousedown starts a line and sets it beginning point
    • Mouseup ends a line and sets its endpoint. This is a permanent line.
    • Mousemove draws a temporary line until the user releases the mouse.
    • All permanent lines must be redrawn when a temporary line is being drawn because the canvas must be erased to create the “moving” temporary line.

    Html canvas draws a line using it's context like this:

        function drawLine(line){
        ctx.beginPath();
        ctx.moveTo(line.x1,line.y1);
        ctx.lineTo(line.x2,line.y2);
        ctx.stroke();
    }

    To set/change the line color, you set the context's strokeStyle:

        context.strokeStyle="blue";

    To erase all drawings on the canvas, you use context's clearRect:

        context.clearRect(0,0,canvas.width,canvas.height);

    If you're not used to specifying hit zones, it's pretty simple.

    • Specify a bounding box (top-left and bottom-right) of the area you might hit (eg. the blue crayon)
    • Then if the mouse clicks inside that bounding box, you have a hit.

    The canvas is layered over the game image and all lines are being drawn on the canvas, not the image.

    The rest is just straightforward javascript stuff.

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

    <!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: ivory; }
    #wrapper{
        position:relative;
        width:637px;
        height:477px;
    }
    #canvas,#bkImg{
        position:absolute; top:0px; left:0px;
        border:1px solid green;
        width:100%;
        height:100%;
    }
    #canvas{
        border:1px solid red;
    }
</style>

<script>
$(function(){

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

    ctx.strokeStyle="red";
    ctx.lineWidth=25;
    ctx.lineCap="round";

    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    var startX;
    var startY;
    var isDown=false;

    var lines=[];

    var eraser={x:446,y:413,right:516,bottom:475};

    var pens=[
        {x:240,y:413,right:275,bottom:475,color:"red"},
        {x:276,y:413,right:308,bottom:475,color:"green"},
        {x:309,y:413,right:341,bottom:475,color:"orange"},
        {x:342,y:413,right:375,bottom:475,color:"blue"},
        {x:376,y:413,right:412,bottom:475,color:"yellow"},
        {x:412,y:413,right:447,bottom:475,color:"pink"},
    ];


    function selectPenColor(x,y){
        for(var i=0;i<pens.length;i++){
            var pen=pens[i];
            if(x>=pen.x && x<=pen.right && y>=pen.y && y<=pen.bottom){
                ctx.strokeStyle=pen.color;
                drawLines();
                return(true);
            }
        }
        return(false);
    }

    function drawLines(){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        for(var i=0;i<lines.length;i++){
            drawLine(lines[i]);
        }
    }

    function drawLine(line){
        ctx.beginPath();
        ctx.moveTo(line.x1,line.y1);
        ctx.lineTo(line.x2,line.y2);
        ctx.stroke();
    }

    function selectEraser(x,y){
        if(x>=eraser.x && x<=eraser.right && y>=eraser.y && y<=eraser.bottom){
            lines=[];
            ctx.clearRect(0,0,canvas.width,canvas.height);
            return(true);
        }
        return(false);
    }


    function handleMouseDown(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // select a pen color or erase
      // if so, don't start a line
      if(selectPenColor(mouseX,mouseY)){return;}
      if(selectEraser(mouseX,mouseY)){return;}

      startX=mouseX;
      startY=mouseY;
      isDown=true;
    }

    function handleMouseUp(e){
      if(!isDown){return;}
      isDown=false;
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      lines.push({x1:startX,y1:startY,x2:mouseX,y2:mouseY});
      drawLines();

    }

    function handleMouseOut(e){
        handleMouseUp(e);
    }

    function handleMouseMove(e){

        if(!isDown){return;}
        mouseX=parseInt(e.clientX-offsetX);
        mouseY=parseInt(e.clientY-offsetY);

        drawLines();

        drawLine({x1:startX,y1:startY,x2:mouseX,y2:mouseY});

    }

    $("#canvas").mousedown(function(e){handleMouseDown(e);});
    $("#canvas").mousemove(function(e){handleMouseMove(e);});
    $("#canvas").mouseup(function(e){handleMouseUp(e);});
    $("#canvas").mouseout(function(e){handleMouseOut(e);});

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

</head>

<body>
    <div id="wrapper">
        <img id="bkImg" src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/game1.png" width=637 height=477>
        <canvas id="canvas" width=637 height=477></canvas>
    </div>
</body>
</html>