Following is my code. I have face issue when I drag a point. The problem is that whenever I drag point all the line connect to one point. I need to have draggable points in a html5 Canvas. But I have a supplementary constraint: the 2 points must be linked by a line. When I drag a point, the line must be dynamically drawn, and still linked to the 2 points.
let points= [];
let drag_point= -1;
let pointSize= 6;
let canvas = document.querySelector("#myCanvas");
let w = canvas.width;
let h = canvas.height;
var ctx = canvas.getContext("2d");
$("#myCanvas").mousedown(function (e) {
var pos = getPosition(e);
drag_point = getPointAt(pos.x, pos.y);
console.log("pos", drag_point);
if (drag_point == -1) {
// no point at that position, add new point
drawlines(pos.x, pos.y);
points.push(pos);
}
});
$("#myCanvas").mousemove(function (e) {
if (drag_point != -1) {
// if currently dragging a point...
var pos = getPosition(e);
//...update that.points position...
points[drag_point].x = pos.x;
points[drag_point].y = pos.y;
redraw(); // ... and redraw myCanvas
}
});
$("#myCanvas").mouseup(function (e) {
drag_point = -1;
});
function getPosition(event) {
var rect = canvas.getBoundingClientRect();
var x = event.clientX - rect.left;
var y = event.clientY - rect.top;
console.log(x, y);
return { x: x, y: y };
}
function getPointAt(x, y) {
for (var i = 0; i < points.length; i++) {
if (
Math.abs(points[i].x - x) < pointSize &&
Math.abs(points[i].y - y) < pointSize
)
// check if x,y is inside points bounding box. replace with pythagoras theorem if you like.
return i;
}
return -1; // no point at x,y
}
function redraw() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // clear canvas
for (var i = 0; i < points.length; i++) {
// draw all points again
drawlines(points[i].x, points[i].y);
}
}
function drawlines(x, y) {
drawImages(x, y);
if (points.length > 0) {
var last = points[points.length - 1];
ctx.beginPath();
ctx.moveTo(last.x, last.y);
ctx.lineTo(x, y);
ctx.strokeStyle = "blue";
ctx.stroke();
}
}
function drawImages(x, y) {
var ctx = document.getElementById("myCanvas").getContext("2d");
ctx.beginPath();
ctx.arc(x, y, pointSize, 0, Math.PI * 2, true);
ctx.strokeStyle = "red";
ctx.stroke();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas
id="myCanvas"
width="1000"
height="1000"
style="border: 1px solid #d3d3d3"
></canvas>
.
See code below...
I refactored your drawlines and drawImages to be called independently not inside a common loop, in my code we draw all lines, then we draw all circles, that way we don't have to change colors back and forth all the time and prevents any overlaps of the lines over the circles, also another change is in the mousedown I call the redraw instead of drawlines.
Looking at your code educated guess the problem is in your:
var last = points[points.length - 1];
that seems very off, technically that is making the last always be the same
let points = [{x:10,y:10},{x:55,y:50},{x:100,y:10}];
let drag_point = -1;
let pointSize = 6;
let canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
canvas.onmousedown = function(e) {
var pos = getPosition(e);
drag_point = getPointAt(pos.x, pos.y);
if (drag_point == -1) {
points.push(pos);
redraw();
}
};
canvas.onmousemove = function(e) {
if (drag_point != -1) {
var pos = getPosition(e);
points[drag_point].x = pos.x;
points[drag_point].y = pos.y;
redraw();
}
};
canvas.onmouseup = function(e) {
drag_point = -1;
};
function getPosition(event) {
var rect = canvas.getBoundingClientRect();
var x = event.clientX - rect.left;
var y = event.clientY - rect.top;
return {x, y};
}
function getPointAt(x, y) {
for (var i = 0; i < points.length; i++) {
if (
Math.abs(points[i].x - x) < pointSize &&
Math.abs(points[i].y - y) < pointSize
)
return i;
}
return -1;
}
function redraw() {
if (points.length > 0) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawLines()
drawCircles()
}
}
function drawLines() {
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
ctx.strokeStyle = "blue";
ctx.lineWidth = 2;
points.forEach((p) => {
ctx.lineTo(p.x, p.y);
})
ctx.stroke();
}
function drawCircles() {
ctx.strokeStyle = "red";
ctx.lineWidth = 4;
points.forEach((p) => {
ctx.beginPath();
ctx.arc(p.x, p.y, pointSize, 0, Math.PI * 2, true);
ctx.stroke();
})
}
redraw()
<canvas id="myCanvas" width=160 height=160 style="border: 1px solid"></canvas>
Related
When I scroll slightly down on my canvas, it does not allow me to drag my text at all. Examples (These are GIFs) -
https://gyazo.com/e60d2efd924ced758c2c6441391804db
GIF explained: So you saw the drag was working when I was on top of the page but when I scrolled slightly down. It completely stopped working. I added a few console.logs around, and what I know is the click event listener for the canvas is working but it isn't detected the text when I slightly scroll down on the page.
I based my drag code from: http://jsfiddle.net/m1erickson/9xAGa/ | What you can see is if you change the canvas size width: 667 and height: 800, and when you scroll slightly down, you will have the same issue I am having.
HTML Code:
<div id="middle_container">
<div class="center_container">
<canvas id="canvas" width="667px" height="800px"></canvas>
</div>
</div>
JavaScript Code:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var $canvas = $("#canvas");
var BB=canvas.getBoundingClientRect();
var offsetX = BB.left;
var offsetY = BB.top;
var mx;
var my;
var texts = [];
var images = [];
var dragF = -1;
var mode = "none";
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for(const { text, x, y, width, height } of texts) {
ctx.fillText(text, x, y);
}
}
function addNewText(string_text) {
var y = texts.length * 20 + 20;
var text = {
text: string_text,
x: 20,
y: y
};
ctx.font = "32px verdana";
ctx.textBaseline = "top";
text.width = ctx.measureText(text.text).width;
text.height = 32;
texts.push(text);
draw();
}
function hitDrag(x,y,textIndex) {
var r=texts[textIndex];
return (x>r.x && x<r.x+r.width && y>r.y && y<r.y+r.height);
}
function myDrag(a,e) {
if (a == "down") {
e.preventDefault();
e.stopPropagation();
mx=parseInt(e.clientX-offsetX);
my=parseInt(e.clientY-offsetY);
for(var i=0;i<texts.length;i++){
if(hitDrag(mx,my,i)){
console.log("found");
dragF = i;
}
}
}
}
addNewText("Hello World")
$("#canvas").mousedown(function(e) {
myDrag("down", e);
});
The problem is this line of code:
var BB=canvas.getBoundingClientRect();
which is only populated once at the start of your script. The .getBoundingClientRect() method returns the position of a HTML element relative to the viewport.
Well if you scroll the window, the viewport moves - as the canvas element - but the BB object still holds the position of your canvas at startup.
The fix is rather simple - you need to use the actual position of the canvas element by calling .getBoundingClientRect() again on mouse down and on mouse move.
I've prepared a little sample based on your code and the fiddle you've linked:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var $canvas = $("#canvas");
var BB = canvas.getBoundingClientRect();
var offsetX = BB.left;
var offsetY = BB.top;
var mx;
var my;
var texts = [];
var images = [];
var dragF = -1;
var mode = "none";
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (const {
text,
x,
y,
width,
height
} of texts) {
ctx.fillText(text, x, y);
}
}
function addNewText(string_text) {
var y = texts.length * 20 + 20;
var text = {
text: string_text,
x: 20,
y: y
};
ctx.font = "32px verdana";
ctx.textBaseline = "top";
text.width = ctx.measureText(text.text).width;
text.height = 32;
texts.push(text);
draw();
}
function myDrag(a, e) {
if (a == "down") {
e.preventDefault();
e.stopPropagation();
let rect = canvas.getBoundingClientRect();
mx = parseInt(e.clientX - rect.left);
my = parseInt(e.clientY - rect.top);
for (var i = 0; i < texts.length; i++) {
if (hitDrag(mx, my, i)) {
// console.log("found");
dragF = i;
}
}
}
}
function hitDrag(x, y, textIndex) {
var r = texts[textIndex];
return (x > r.x && x < r.x + r.width && y > r.y && y < r.y + r.height);
}
function handleMouseMove(e) {
if (dragF < 0) {
return;
}
e.preventDefault();
let rect = canvas.getBoundingClientRect();
mouseX = parseInt(e.clientX - rect.left);
mouseY = parseInt(e.clientY - rect.top);
var dx = mouseX - mx;
var dy = mouseY - my;
mx = mouseX;
my = mouseY;
var text = texts[dragF];
text.x += dx;
text.y += dy;
draw();
}
function handleMouseUp(e) {
e.preventDefault();
dragF = -1;
}
addNewText("Hello World")
$("#canvas").mousedown(function(e) {
myDrag("down", e);
});
$("#canvas").mousemove(function(e) {
handleMouseMove(e);
});
$("#canvas").mouseup(function(e) {
handleMouseUp(e);
});
body {
background-color: ivory;
}
#canvas {
border: 1px solid red;
}
#theText {
width: 10em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="middle_container">
<div class="center_container">
<canvas id="canvas" width="667px" height="800px"></canvas>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
I am very new to the HTML canvas and so far the only way I've used it is with the p5.js framework. I have a particle system in which I want the particles to chase my cursor. However, they won't show up, although the inspector isn't throwing any errors:
function getRandomArbitrary(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
var mouseX, mouseY;
var c=document.getElementById("myCanvas");
c.width = window.innerWidth;
c.height = window.innerHeight;
var ctx=c.getContext("2d");
var img=document.getElementById("stars");
function star(X, Y) {
this.x = X;
this.y = Y;
this.size = getRandomArbitrary(3, 5);
}
star.prototype.draw = function() {
ctx.fillStyle = "red";
ctx.fill();
ctx.beginPath();
ctx.arc(this.x,this.y, this.size, 0, 2*Math.PI);
ctx.stroke();
}
star.prototype.update = function() {
// var mousePos = getMousePos(ctx, e);
var xvel = this.x - mouseX;
var yvel = this.y - mouseY;
Math.max(1, Math.min(xvel, 7));
Math.max(1, Math.min(yvel, 7));
this.x += xvel;
this.y += yvel;
}
function starSystem(Num) {
this.stars = [];
for (var i = 0; i < Num; i++) {
this.stars.push(new star(getRandomArbitrary(0, ctx.width), getRandomArbitrary(0, ctx.height)));
}
}
starSystem.prototype.run = function() {
for (var i = 0; i < this.stars.length; i++) {
this.stars[i].update();
this.stars[i].draw();
}
}
// ctx.drawImage(img,10,10);
var ss = new starSystem(50);
function iterate(e) {
mouseX = e.clientX;
mouseY = e.clientY;
ss.run();
}
Here is my canvas tag:
<canvas id="myCanvas" onmousemove="iterate(event)">
</canvas>
I wouldn't want to call the iterate function this way (I would rather just use a setInterval) but this seems the easiest way I can get hold of the event variable e so I can calculate the mouse position. (See my iterate function)
My main question is: why isn't the draw function for the stars creating any visible results on the canvas? I know my code is probably very messy and unconventional, but I would like to know what is the most efficient way to get the particles to draw on the screen. Thanks so much!
I have drawn a grid in html5 canvas using StrokeLineX and StrokeLineY. I want to highlight the particular square/rectangle when I click on it in the grid.
I have tried using math.floor to define an index for a space but as soon as the width or height increases it starts giving different answers. I have tried too many times before finally posting it here.
Here is the code.
var canvas = document.getElementById("myCanvas");
canvas.addEventListener('click', on_canvas_click, false);
var ctx = canvas.getContext("2d");
var tray_length = 800;
var tray_depth = 800;
var boxHeight = 50;
var boxWidth = 50;
var canvas_X = tray_length;
var canvas_Y = tray_depth;
var box_x_pixels = canvas_X/no_of_columns;
var box_y_pixels = canvas_Y/no_of_rows;
// Drawing the grid
for (var y = boxWidth; y < canvas_Y; y += boxWidth) {
strokeLineX(ctx, y);
}
for (var x = boxHeight; x < canvas_X; x += boxHeight) {
strokeLineY(ctx, x);
}
function strokeLineX(ctx, y) {
ctx.beginPath();
ctx.strokeStyle = 'green';
ctx.moveTo(0, y);
ctx.lineTo(canvas_X, y);
ctx.stroke();
ctx.closePath();
}
function strokeLineY(ctx, x) {
ctx.beginPath();
ctx.strokeStyle = 'red';
ctx.moveTo(x, 0);
ctx.lineTo(x, canvas_Y);
ctx.stroke();
ctx.closePath();
}
function on_canvas_click(ev) {
var x = ev.pageX - canvas.offsetLeft;
var y = ev.pageY - canvas.offsetTop;
console.log(x+":"+y);
var coordinateDisplay = "x=" + x + ", y=" + y;
if (y>= 0 && y <= y+boxHeight ) {
var indexOfX = Math.floor(x/boxWidth); //divide on width and round off
var indexOfY = Math.floor(y/boxHeight);
// alert('You clicked bar index: ' + indexOfX+"-"+indexOfY);
ctx.fillRect="green";
ctx.rect(x,y,box_x_pixels,box_y_pixels);
ctx.stroke();
console.log(indexOfX + "-" + indexOfY);
}
}
In on_canvas_click change the following:
Instead of
ctx.fillRect="green";
do:
ctx.fillStyle="green";
And instead of:
ctx.rect(x,y,box_x_pixels,box_y_pixels);
do:
ctx.fillRect(boxWidth*indexOfX, boxHeight*indexOfY, boxWidth, boxHeight);
... and you don't need:
ctx.stroke();
Here is a working snippet with those changes applied, but also with some simplifications which are unrelated to your problem:
Removal of unused variables;
Use of one function to draw lines, instead of two;
Use of canvas.width and canvas.height properties;
Drawing grid lines also on the outer grid boundaries
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var boxHeight = 50;
var boxWidth = 50;
var canvas_X = canvas.width;
var canvas_Y = canvas.height;
canvas.addEventListener('click', on_canvas_click, false);
// Drawing the grid
for (var y = 0; y <= canvas_Y; y += boxWidth) {
strokeLine(ctx, 0, y, canvas_X, y, 'green');
}
for (var x = 0; x <= canvas_X; x += boxHeight) {
strokeLine(ctx, x, 0, x, canvas_Y, 'red');
}
function strokeLine(ctx, x0, y0, x1, y1, color) {
ctx.beginPath();
ctx.strokeStyle = color;
ctx.moveTo(x0, y0);
ctx.lineTo(x1, y1);
ctx.stroke();
ctx.closePath();
}
function on_canvas_click(ev) {
var x = ev.pageX - canvas.offsetLeft;
var y = ev.pageY - canvas.offsetTop;
if (y>= 0 && y <= y+boxHeight ) {
var indexOfX = Math.floor(x/boxWidth); //divide on width and round off
var indexOfY = Math.floor(y/boxHeight);
ctx.fillStyle="green";
ctx.fillRect(boxWidth*indexOfX, boxHeight*indexOfY, boxWidth, boxHeight);
}
}
<canvas id="myCanvas" width="600" height="200"></canvas>
This is a canvas JavaScript code.
<canvas id="canvas" width="500" height="500" style="border:1px solid"></canvas>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var radius = 50;
var nStartX = 0;
var nStartY = 0;
var bIsDrawing = false;
var putPoint = function(e) {
nStartX = e.clientX;
nStartY = e.clientY;
bIsDrawing = true;
radius = 0;
}
var drawPoint = function(e) {
if (!bIsDrawing)
return;
var nDeltaX = nStartX - e.clientX;
var nDeltaY = nStartY - e.clientY;
radius = Math.sqrt(nDeltaX * nDeltaX + nDeltaY * nDeltaY);
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.arc(nStartX, nStartY, radius, 0, Math.PI * 2);
context.fill();
context.fillStyle = 'rgba(0, 0, 0, 0)';
context.lineWidth = 1;
context.stroke();
}
var stopPoint = function(e) {
bIsDrawing = false;
}
canvas.addEventListener('mousedown', putPoint);
canvas.addEventListener('mousemove', drawPoint);
canvas.addEventListener('mouseup', stopPoint);
</script>
I want radius to be shown or filled with color.
This is requirement. Start with a single left mouse click (down action) which will be the center of the circle and move the mouse without lifting the left mouse button to set the radius of the circle. The circle should be drawn as you move the mouse with radius equal to distance between the first point and the mouse position. Release the left mouse button to fix the radius. A marker is added at the point where the mouse button is released to mark that point. (This will be the point on the circumference of that circle)
You need to get the offset to the top left of the canvas and remove that from the mouse coordinates to you can get the coordinates relative to the canvas top left.
How I would handle the mouse.
// get canvas offset
var canvasTopLeft = canvas.getBoundingClientRect();
// create the mouse object
var mouse = {};
mouse.x = 0;
mouse.y = 0;
mouse.down = false;
mouse.buttonChanged = false;
mouse.button = 0;
mouse.origin = {};
mouse.origin.x = canvasTopLeft.left;
mouse.origin.y = canvasTopLeft.top;
// the mouse event handler handles all events
var mouseEvent = function (e) {
mouse.x = e.clientX - mouse.origin.x;
mouse.y = e.clientY - mouse.origin.y;
mouse.buttonChanged = 0;
if (e.type === "mousedown") {
mouse.down = true;
mouse.buttonChanged = e.which;
} else if (e.type === "mouseup") {
mouse.down = false;
mouse.buttonChanged = e.which;
}
update(); // updates the display
}
// add events we want to listen to;
canvas.addEventListener('mousedown', mouseEvent);
canvas.addEventListener('mousemove', mouseEvent);
canvas.addEventListener('mouseup', mouseEvent);
The snippet show how I use it to draw circles with position and radius marked.
<canvas id="canvas" width="500" height="500" style="border:1px solid"></canvas>
<script>
// constants
const TICK_SIZE = 5;
const GIZOM_SIZE = 3;
const CIRCLE_STYLE = "BLACK";
const CIRCLE_LINE_WIDTH = 1;
const FONT = "18px Arial";
const FONT_STYLE = "RED";
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// array of circles;
var circles = [];
// current circle being drawn
var currentCircle = null;
// true if mouse dragging
var dragging = false;
// draws a circle;
function drawCircle(circle) {
var nx,
ny;
ctx.strokeStyle = CIRCLE_STYLE;
ctx.lineWidth = CIRCLE_LINE_WIDTH;
// draw circle
if (!circle.showGizom) {
ctx.beginPath();
ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2);
ctx.stroke();
} else {
// calculate the radius
var nx = circle.gx - circle.x;
var ny = circle.gy - circle.y;
circle.r = Math.sqrt(nx * nx + ny * ny);
ctx.beginPath();
ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2);
// draw center tick
ctx.moveTo(circle.x - TICK_SIZE, circle.y - TICK_SIZE);
ctx.lineTo(circle.x + TICK_SIZE, circle.y + TICK_SIZE);
ctx.moveTo(circle.x + TICK_SIZE, circle.y - TICK_SIZE);
ctx.lineTo(circle.x - TICK_SIZE, circle.y + TICK_SIZE);
// draw radius line
ctx.moveTo(circle.x, circle.y);
ctx.lineTo(circle.gx, circle.gy);
// draw gizom
ctx.moveTo(circle.gx - GIZOM_SIZE, circle.gy - GIZOM_SIZE);
ctx.lineTo(circle.gx + GIZOM_SIZE, circle.gy + GIZOM_SIZE);
ctx.moveTo(circle.gx + GIZOM_SIZE, circle.gy - GIZOM_SIZE);
ctx.lineTo(circle.gx - GIZOM_SIZE, circle.gy + GIZOM_SIZE);
ctx.stroke();
// draw radius
ctx.font = FONT;
ctx.fillStyle = FONT_STYLE;
ctx.textAlign = "center";
// get the transform to draw the text
nx /= circle.r; // normalise the vector from center to gizom
ny /= circle.r;
if(nx < 0){ // is text upside down
// set the transform to be the revers and from the gizom
ctx.setTransform(-nx, -ny, ny, -nx, circle.gx, circle.gy);
} else {
ctx.setTransform(nx, ny, -ny, nx, circle.x, circle.y);
}
ctx.fillText(circle.r.toFixed(1), circle.r / 2, 0);
ctx.setTransform(1, 0, 0, 1, 0, 0); // restore transform
}
}
// draw all circles;
function drawCircles() {
var i = 0,
len = circles.length;
for (; i < len; i++) {
drawCircle(circles[i]);
}
}
// render everything
function render() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawCircles();
}
// create a new circle
function createCircle(x, y) {
return currentCircle = {
x : x,
y : y,
r : 0,
gx : x, // gizom location
gy : y,
showGizom : true,
};
}
// get canvas offset
var canvasTopLeft = canvas.getBoundingClientRect();
// create the mouse object
var mouse = {};
mouse.x = 0;
mouse.y = 0;
mouse.down = false;
mouse.buttonChanged = false;
mouse.button = 0;
mouse.origin = {};
mouse.origin.x = canvasTopLeft.left;
mouse.origin.y = canvasTopLeft.top;
// the mouse event handler
var mouseEvent = function (e) {
mouse.x = e.clientX - mouse.origin.x;
mouse.y = e.clientY - mouse.origin.y;
mouse.buttonChanged = 0;
if (e.type === "mousedown") {
mouse.down = true;
mouse.buttonChanged = e.which;
} else if (e.type === "mouseup") {
mouse.down = false;
mouse.buttonChanged = e.which;
}
update();
}
// add events we want to listen to;
canvas.addEventListener('mousedown', mouseEvent);
canvas.addEventListener('mousemove', mouseEvent);
canvas.addEventListener('mouseup', mouseEvent);
// function to update mouse interaction
function update() {
//if (mouse.down || dragging) { // while the is a need to render
if (mouse.buttonChanged === 1) { // is the left button changed
if (mouse.down) { // is it down
if (currentCircle !== null) { // is there a circle active ??
currentCircle.showGizom = false; // turn off its gizom
}
circles.push(createCircle(mouse.x, mouse.y)); // create a new circle at mouse
dragging = true; // flag that we are dragging
} else {
dragging = false; // stop dragging
}
}
if (dragging) { // while dragging move the circle gizom
currentCircle.gx = mouse.x;
currentCircle.gy = mouse.y;
}
// draw any updates
render();
//}
}
</script>
I have completed code that has a user click a button (to the right of the canvas), then the image is added to the canvas and is constrained to only move around the circumference of a circle. In order to move the image the user just needs to click the image and then move the mouse. To release the image the user simply needs to click where the image goes on the canvas.
Here is a fiddle showing what the current code does.
http://jsfiddle.net/smacnabb/68awv7sq/9/
Question: I am looking to be able to have the images that move around the circumference of the circle rotate while moving around the circumference of the circle.
This is what I mean:
Here is a fiddle for the code I added to try and make this happen
http://jsfiddle.net/smacnabb/68awv7sq/11/
in the handlemousemove method, it calls state.draw() every time the mouse move i'm passing mouseX, mouseY to state.draw.
state.draw() is in addstate method and this was the code I added to make the image rotate
var dx = mouseX - centerX;
var dy = mouseY - centerY;
var radianAngle = Math.atan2(dy, dx);
context.save();
context.translate(centerX, centerY);
context.rotate(radianAngle);
if (this.dragging) {
context.strokeStyle = 'black';
context.strokeRect(this.x, this.y, this.width + 2, this.height + 2)
}
context.drawImage(this.image, this.x, this.y);
context.restore();
What am I doing wrong?
You are close...Take a look at this example:
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 radianAngle = 0;
var cx = 225;
var cy = 125;
var radius = 50;
// image loader
var imageURLs = [];
var imagesOK = 0;
var imgs = [];
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/cars.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/plane.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/cars1.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/plane1.png");
loadAllImages(start);
function loadAllImages(callback) {
for (var i = 0; i < imageURLs.length; i++) {
var img = new Image();
imgs.push(img);
img.onload = function() {
imagesOK++;
if (imagesOK >= imageURLs.length) {
callback();
}
};
img.onerror = function() {
alert("image load failed");
}
img.crossOrigin = "anonymous";
img.src = imageURLs[i];
}
}
var imagesY = 20;
var targets = [];
var selectedTarget = -1;
function start() {
var n = imgs.length / 2;
for (var i = 0; i < n; i++) {
var target = imgs[i + n];
ctx.drawImage(target, 15, imagesY);
targets.push({
x: 15,
y: imagesY,
width: target.width,
height: target.height,
image: imgs[i]
});
imagesY += target.height + 10;
}
}
function handleMouseDown(e) {
e.preventDefault();
x = parseInt(e.clientX - offsetX);
y = parseInt(e.clientY - offsetY);
for (var i = 0; i < targets.length; i++) {
var t = targets[i];
if (x >= t.x && x <= t.x + t.width && y >= t.y && y <= t.y + t.height) {
selectedTarget = i;
draw(x, y);
}
}
}
function handleMouseMove(e) {
if (selectedTarget < 0) {
return;
}
e.preventDefault();
mouseX = parseInt(e.clientX - offsetX);
mouseY = parseInt(e.clientY - offsetY);
draw(mouseX, mouseY);
}
function draw(mouseX, mouseY) {
var dx = mouseX - cx;
var dy = mouseY - cy;
var radianAngle = Math.atan2(dy, dx);
// Drawing code goes here
var img = targets[selectedTarget].image;
ctx.clearRect(100, 0, canvas.width, canvas.height);
// draw the circle
ctx.beginPath();
ctx.arc(cx, cy, radius, 0, Math.PI * 2);
ctx.closePath();
ctx.stroke();
// draw the image rotated around the circumference
ctx.save();
ctx.translate(cx, cy);
ctx.rotate(radianAngle);
ctx.drawImage(img, radius - img.width / 2, -img.height / 2);
ctx.restore();
}
$("#canvas").mousedown(function(e) {
handleMouseDown(e);
});
$("#canvas").mousemove(function(e) {
handleMouseMove(e);
});
body{ background-color: ivory; }
canvas{border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Select an icon on left by clicking<br>
Then move mouse to have icon rotate around circle</h4>
<canvas id="canvas" width=350 height=350></canvas>