CODEWITHSUNDEEP
javascriptjqueryhtmlcanvas
user3174610
user3174610

Reputation: 33

Canvas and events

Please help me to understand the events of the canvas.

Take for example two of the square. Each has its own area where you need to process such events:

  1. Hover the square fills it with colour.
  2. Click invokes filling the square third color and displays in a separate block, for example, the ID of the square.
  3. Accordingly, it is possible to work with only one square. Click on the second square will reset the first square and output data from the second.
  4. While moving the mouse in the area of one of the squares near the mouse, a pop-up window that displays the ID of the square.

And how can I make a link to a separate square? That is, to the user clicks a link that invokes the event, similar to a click on a separate square.

HTML code

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="scripts/canvas.js"></script>
<script>
    window.onload = function()
    {
        drawCanvas('mainCanvas');
    };
</script>
</head>
<body style="margin: 0px;">
    <canvas id="mainCanvas" width="300" height="200"></canvas>
    <aside>ID of the square</aside>
</body>
</html>

JS code

function makeRect(x, y, w, h)
{
    return { x: x, y: y, w: w, h: h };
}

function drawCanvas(canvasId)
{
    //// General Declarations
    var canvas = document.getElementById(canvasId);
    var context = canvas.getContext('2d');


    //// Color Declarations
    var blackColor = 'rgba(0, 0, 0, 1)';
    var whiteColor = 'rgba(255, 255, 255, 1)';

    //// Frames
    var frameOne = makeRect(64, 70, 50, 50);
    var frameTwo = makeRect(194, 70, 50, 50);


    //// RectangleOne Drawing
    context.beginPath();
    context.rect(frameOne.x, frameOne.y, 50, 50);
    context.fillStyle = whiteColor;
    context.fill();
    context.strokeStyle = blackColor;
    context.lineWidth = 1;
    context.stroke();


    //// RectangleTwo Drawing
    context.beginPath();
    context.rect(frameTwo.x, frameTwo.y, 50, 50);
    context.fillStyle = whiteColor;
    context.fill();
    context.strokeStyle = blackColor;
    context.lineWidth = 1;
    context.stroke();
}

Upvotes: 0

Views: 200

Answers (2)

LogPi
LogPi

Reputation: 706

Canvas is only an element. You can catch event for all canvas not for squares, circle, line...

But you can hold the position of square , line, circle and check "if ( mouse's position in square position) and redraw canvas

Personally, you can try to use SVG and you can catch the events for individual element.

Upvotes: 0

markE
markE

Reputation: 105015

You ask a really broad question!

This will get you started:

About canvas rectangles

When you draw a rect on the canvas it becomes just “painted pixels” (like a painting of a rectangle on an artists canvas).

Nothing about the rect is “remembered” by canvas.

This means you can’t hit-test the rect to see if your mouse is hovering over that rect. The canvas doesn’t know anything about your rect.

Keeping track of rectangles

You must keep track of each rect’s properties yourself (x-coordinate, y-coordinate, width, height, color).

A convienient way to do this is creating a javascript object with the rect’s properties:

    var rect1 = { x:30, y:30, width:50, height:25, color:"blue" };

Then use this rect1 object to draw the rect on your canvas

context.fillStyle=rect1.color;
context.fillRect( rect1.x, rect1.y, rect1.width, rect1.height );

Now you can always refer to rect1 to get the properties of your rectangle.

Mouse events

The canvas mouse events always relate to the canvas element itself, never to a rect drawn on the canvas.

Here’s how to listen to the mouse events on canvas:

// use jQuery to ask the browser to call `handleMouseMove` whenever the mouse is moved

$("#canvas").mousemove(function(e){handleMouseMove(e);});

// this is called every time your mouse moves

function handleMouseMove(e){

    // get the mouses current X,Y position
    // Note: offsetX/offsetY -- you must adjust for the offset of the canvas relative to the web page

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

}

Testing if the mouse is inside the rect

Remember that canvas knows nothing about your rect1, so use the rect1 object to “hit-test” whether the mouse is inside rect1:

if(
    mouseX>=rect1.x &&
    mouseX<=rect1.x+rect1.width &&
    mouseY>=rect1.y &&
    mouseY<=rect1.y+rect1.height
){

    // the mouse is inside rect1

    ctx.fillStyle="red";
    ctx.fillRect(rect1.x,rect1.y,rect1.width,rect1.height);

}else{

    // the mouse is not inside rect1

    ctx.fillStyle=rect1.color;
    ctx.fillRect(rect1.x,rect1.y,rect1.width,rect1.height);

}

This introduction should get you started coding…experiment for yourself!

Here’s a working demo: http://jsfiddle.net/m1erickson/tPjWX/

<!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 ctx=canvas.getContext("2d");

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

    var rect1 = { x:30, y:30, width:50, height:25, color:"blue" };
    ctx.fillStyle=rect1.color;
    ctx.fillRect(rect1.x,rect1.y,rect1.width,rect1.height);

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

      if(
          mouseX>=rect1.x &&
          mouseX<=rect1.x+rect1.width &&
          mouseY>=rect1.y &&
          mouseY<=rect1.y+rect1.height
          ){
              ctx.fillStyle="red";
              ctx.fillRect(rect1.x,rect1.y,rect1.width,rect1.height);
          }else{
              ctx.fillStyle=rect1.color;
              ctx.fillRect(rect1.x,rect1.y,rect1.width,rect1.height);
          }

    }

    $("#canvas").mousemove(function(e){handleMouseMove(e);});


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

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Upvotes: 1

Related Questions