CODEWITHSUNDEEP
javascriptcanvas
user65165
user65165

Reputation: 972

Shape rollover in JavaScript

I have drawn 2 images in canvas using javascript (lineTo, moveTo, rect etc.), and I want to manipulate these images in a rollover kinda way. I know I'm supposed to write functions like "onmouseover" and "onmouseaway", thing is I don't know how I can manipulate the two shapes I already have in the canvas given that I don't have their sources... I tried googling but it got a bit confusing.

alert: i'm beginner in JS

http://jsfiddle.net/aertop9416/J7Brj/embedded/result/

.js file

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

function drawTriangle(){
    context.beginPath();
    context.moveTo(225,275);
    context.lineTo(25,25); 
    context.lineTo(0,275);
    context.fill(); 
    // context.fillStyle = 'rgb(200, 95, 124)'; 
};

function drawRect(){
    context.fillRect(300,25,100,100);
    // context.clearRect(245,245,60,60);
    // context.strokeRect(250,250,50,50);
    context.fillStyle = 'rgb(120, 195, 124)';

};

Upvotes: 0

Views: 134

Answers (1)

tylermadison
tylermadison

Reputation: 335

If you're not using a library such as EasleJS for interactivity (http://www.ajohnstone.com/test/hackday/CreateJS-EaselJS-b262a85/tutorials/Mouse%20Interaction/), It's going to be a bit tricky, since canvas uses immediate render mode you need to retain the state of your objects. Use the mouse interaction event listeners to trigger an animation loop (hopefully using requestAnimationFrame for performance see: http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/). I hope this gets you going in the right direction.

Upvotes: 1

Related Questions