CODEWITHSUNDEEP
javascriptcsshtmlcanvas
user3177502
user3177502

Reputation: 83

Canvas size in HTML5

I have this code in my project, here is the link: http://jsfiddle.net/89wgk/

This is my code:

<canvas id="myCanvas" width="188" height="200"></canvas>
     var rectWidth = 110;
     var rectHeight = 110;
     var rectX = 10;
     var rectY = 25;

When I put the mouse in curved rectangle starts the shadow, but I want that to happen when I put the mouse over the reeds (rectangle) and not within the canvas.

I wonder how do I run the shadow so when I move the mouse over the rectangle?

Upvotes: 0

Views: 95

Answers (1)

markE
markE

Reputation: 105015

Here is how I would do it:

  • create a function that draws the arc shape because it must be redrawn often
  • listen for mouseMove events on the canvas
  • test whether the mouse is inside the arc with context.isPointInside(mouseX,mouseY)
  • redraw the arc with/without the shadow based on if the mouse is inside the arc

Have Fun!

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

<!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; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

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

    var w = 110;
    var h = 110;
    var x = 10;
    var y = 25;

    var isShadowed=false;

    context.strokeStyle="#FF2A2A";
    context.shadowBlur = 20;
    context.shadowOffsetX = 5;
    context.shadowOffsetY = 5;


    context.globalAlpha=.250;
    context.strokeRect(x,y,w,h);
    context.globalAlpha=1.00;

    function draw(){

        // clear the canvas
        context.clearRect(0,0,canvas.width,canvas.height);

        // save the context state
        context.save();

        // set/clear the shadow based on isShadowed
        context.shadowColor= isShadowed ? '#7FD4FF' : "#FFFFFF";

        // draw the arc shape
        context.beginPath();
        context.moveTo(x,y);
        context.quadraticCurveTo(x+w-2,y+2,x+w,y+h);
        context.lineTo(x+w-35,y+h);
        context.quadraticCurveTo(x+w-2-35,y+2+35,x,y+35);
        context.lineTo(x,y);
        context.fillStyle="red";
        context.fill();
        context.stroke();

        // restore the context state
        context.restore();
    }

    // testing: display if mouse is in/out of arc shape
    var $status=$("#status");

    // listen for mousemove events
    $("#canvas").mousemove(function(e){handleMouseMove(e);});

    // handle mousemove events
    function handleMouseMove(e){

        // we alone are using mousemove events
        e.preventDefault();

        // get current mouse X/Y
        mouseX=parseInt(e.clientX-offsetX);
        mouseY=parseInt(e.clientY-offsetY);

        // hit test if mouse is inside the arc shape
        var isInside=context.isPointInPath(mouseX,mouseY);
        $status.text("Is mouse inside: "+isInside);

        // don't redraw unless needed
        if(isInside && isShadowed){return;}
        if(!isInside && !isShadowed){return;}

        // change the shadow and redraw
        isShadowed=isInside;
        draw();
    }


    // start by drawing the unshadowed arc
    draw();

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

</head>

<body>
    <p id="status">Status</p><br>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Upvotes: 2

Related Questions