I don't know js, I write on python, but I need to draw circles on web page at the clicked location. So, for really I use selenium and I need to see where the click is. Because I don't click the dom elements, I click coordinates and sometimes Selenium click wrong, so I want to control it.
I tried some code like below, of course it doesn't work, i don't know why. So I found the similar solution. It doesn't work for me. So I can't find the working solution for highlighting the clicks.
var canv = document.createElement('canvas');
canv.id = 'canvas';
document.body.appendChild(canv);
document.getElementById('canvas').appendChild(canv);
onclick = function showCoords(event) {
var x = event.clientX;
var y = event.clientY;
var radius = 5;
var canvas = document.getElementsByTagName('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(x, y, radius, 40, 0, 2 * Math.PI);
ctx.stroke();
var coords = 'X coords: ' + x + ', Y coords: ' + y;
console.log(coords);
}
You try to append the canvas to the canvas
This works
var canv = document.createElement('canvas');
canv.id = 'canvas';
document.body.appendChild(canv);
var ctx = canv.getContext('2d');
canv.addEventListener("click",function(event) {
var x = event.clientX;
var y = event.clientY;
var radius = 5;
ctx.beginPath();
ctx.arc(x, y, radius, 40, 0, 2 * Math.PI);
ctx.stroke();
var coords = 'X coords: ' + x + ', Y coords: ' + y;
console.log(coords);
})
The decision is
var myCanvas = document.createElement('canvas');
document.body.appendChild(myCanvas);
myCanvas.id = 'canvas';
myCanvas.style.position = 'absolute';
myCanvas.style.left = "0px";
myCanvas.style.top = "0px";
myCanvas.width = window.innerWidth;
myCanvas.height = window.innerHeight;
var ctx = myCanvas.getContext('2d');
myCanvas.addEventListener("click", function (event) {
var x = event.clientX;
var y = event.clientY;
ctx.fillStyle = "#2980b9";
ctx.beginPath();
ctx.arc(x, y, 10, 0, 2 * Math.PI);
ctx.fill();
ctx.closePath();
setTimeout(function () { ctx.clearRect(0, 0, myCanvas.width, myCanvas.height) }, 300);
})
Related
In my code:
var canvas = document.createElement('canvas');
canvas.width = 1600;
canvas.height = 900;
document.body.appendChild(canvas);
var similarX = 0;
var similarY = 0;
document.addEventListener('mousemove',function(event){
similarX = event.clientX;
similarY = event.clientY;
document.getElementById('body').innerHTML = "x:" + similarX + ", y:" + similarY +", imgData:" + pixelData;
var pixelData = rect.getImageData(60, 60, 1, 1).data;
})
window.addEventListener('load' , start);
var c = canvas.getContext('2d')
var rect = canvas.getContext ('2d')
var circle = canvas.getContext ('2d')
function start() {
c.clearRect(0, 0, 1600, 900);
c.fillStyle = 'green' ;
c.fillRect(similarX - 12, similarY - 50, 20, 20);
rect.fillStyle = 'black';
rect.fillRect(50,50,80,80);
window.requestAnimationFrame(start)
}
document.body.appendChild(canvas);
I want to detect what color are the pixels around the green player square so that if it touches the black box, it is detected by a getImageData() command? I tried reading the other posts, but I couldn't find a way to use them. Is there a solution that can easily be placed inside the code?
I have an application where I need to move the points I created to a certain part of the canvas. How can I do it?
$("#canvas").click(function(e){
getPosition(e);
});
var pointSize = 1;
function getPosition(event){
var rect = canvas.getBoundingClientRect();
var x = event.clientX - rect.left;
var y = event.clientY - rect.top;
console.log(x,y)
drawCoordinates(x,y);
}
function drawCoordinates(x,y){
var ctx = document.getElementById("canvas").getContext("2d");
ctx.fillStyle = "#ff2626"; // Red color
ctx.beginPath();
ctx.arc(x, y, pointSize, 0, Math.PI * 2, true);
ctx.fill();
}
http://jsfiddle.net/bfe8160h/
There's no easy way to drag drawn things on canvas, so you're gonna have to store all points' positions, and redraw the whole canvas.
Something like this:
var points = []
var drag_point = -1
$("#canvas").mousedown(function(e){
var pos = getPosition(e)
drag_point = getPointAt(pos.x,pos.y)
if(drag_point==-1){ // no point at this position, add new point
drawCoordinates(pos.x,pos.y)
points.push(pos)
}
});
$("#canvas").mousemove(function(e){
if(drag_point!=-1){ // if currently dragging a point...
var pos = getPosition(e)
//...update points position...
points[drag_point].x = pos.x
points[drag_point].y = pos.y
redraw() // ... and redraw canvas
}
});
$("#canvas").mouseup(function(e){
drag_point = -1
});
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(){
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height); // clear canvas
for(var i=0;i<points.length;i++){ // draw all points again
drawCoordinates(points[i].x,points[i].y)
}
}
function getPosition(event){
var rect = canvas.getBoundingClientRect();
var x = event.clientX - rect.left;
var y = event.clientY - rect.top;
return {x:x,y:y}
}
function drawCoordinates(x,y){
var ctx = document.getElementById("canvas").getContext("2d");
ctx.fillStyle = "#ff2626"; // Red color
ctx.beginPath();
ctx.arc(x, y, pointSize, 0, Math.PI * 2, true);
ctx.fill();
}
import
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
and use jquery to drag your div..Example:
$('#divname').draggable();
Im trying to create and delete arcs on events, to adding parts works fine and i'm saving them in arrays so i could delete them on calling an event listener by somehow that's not happening , I mean its working fine in the console as in the array values are decremented by its not updating in the canvas
Code:
<script>
var myCanvas = document.getElementById("myCanvas");
myCanvas.width = window.innerWidth;
myCanvas.height = 500;
var c = myCanvas.getContext("2d");
var myArr = [];
myCanvas.addEventListener("click", function(){
var x = event.x;
var y = event.y;
var radius = 10;
myArr.push(new CreateCircle(x, y, radius, "#34495e"));
console.log( myArr );
});
window.addEventListener('keydown', function(){
myArr.splice(0,1);
console.log(myArr);
});
function CreateCircle(x, y, radius, color) {
this.x = x;
this.y = y;
this.radius = radius;
this.color = color;
this.draw = function() {
c.beginPath();
c.arc(this.x, this.y, this.radius, 0, Math.PI*2);
c.fillStyle = this.color;
c.fill();
}
this.draw();
}
</script>
Do i need to add an delete function in the constructor function and call it on keydown event , how do i go on doing it/fixing it ?
To remove the circles, you have to clear the canvas, and then redraw it with the modified array of circles.
First of all, return an object from the CreateCircle method, so you have something to work with. There's no need for instances here.
Secondly, you could clear the canvas by resetting it's width, and then redraw based on the array, like this
var myCanvas = document.getElementById("myCanvas");
myCanvas.width = window.innerWidth;
myCanvas.height = 500;
var c = myCanvas.getContext("2d");
var myArr = [];
myCanvas.addEventListener("click", function() {
var x = event.x;
var y = event.y;
var radius = 10;
myArr.push(CreateCircle(x, y, radius, "#34495e"));
});
window.addEventListener('keydown', function() {
myArr.splice(0, 1);
myCanvas.width = myCanvas.width;
myArr.forEach(function(circle) {
CreateCircle(circle.x, circle.y, circle.r, circle.c)
})
});
function CreateCircle(x, y, radius, color) {
c.beginPath();
c.arc(x, y, radius, 0, Math.PI * 2);
c.fillStyle = color;
c.fill();
return {x: x, y: y, r: radius, c: color};
}
<canvas id="myCanvas"></canvas>
You don't update canvas anywhere. You need to create some sort of "render" function which will clear previously rendered frame and then loops through circles in array and call .draw on all of them.
Tip:
context.clearRect method is useful for clearing canvas.
So I am trying to make an image appear as if it is moving across and canvas and restore the previous background when its next drawn.
The following test worked when drawing a basic rectangle.
var canvas = document.querySelector('canvas'),
ctx = canvas.getContext('2d');
var x = 10, = 10, w = 50, h = 50;
var vx = 2;
var vy = 2;
var back = ctx.getImageData(1,1,1,1);
function draw() {
ctx.putImageData(back,x, y);
x += vx;
y += vy;
back=ctx.getImageData(x, y, w, h);
ctx.fillRect(x, y, w, h);
}
setInterval(draw, 1000/60);
However when substituting the rectangle for an image as follows, it doesnt appear to show point.png and instead the imagedata for "back" appears to move.
var canvas = document.querySelector('canvas'),
ctx = canvas.getContext('2d');
var x = 10,
y = 10,
w = 50,
h = 50;
var vx = 2;
var vy = 2;
var back = ctx.getImageData(1, 1, 1, 1);
function draw() {
ctx.putImageData(back, x, y);
x += vx;
y += vy;
back = ctx.getImageData(x, y, w, h);
var img = document.getElementById("point");
ctx.drawImage(img, x, y, w, h);
}
setInterval(draw, 1000 / 60);
Can anyone tell me what I am doing wrong and how to fix this?
check the console, you should see something like that
`Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.`
Once you have inserted some external datas in the the canvas, you can not access to its contents anymore.
The image must have the same origin as the page.
I'm trying to draw a circle wherever the user clicks on the screen using angular on canvas. My code doesn't seem to be working.
Here's my plnk
http://plnkr.co/edit/rYVLgB14IutNh1F4MN6T?p=preview
var app = angular.module('plunker', []);
app.controller('MainController', function($scope) {
//alert("test");
$scope.doClick = function(event){
var x = event.clientX;
var y = event.clientY;
var offsetX = event.offsetX;
var offsetY = event.offsetY;
//alert(x, y, offsetX, offsetY);
//console.log(x, y, offsetX, offsetY);
var ctx = getContext("2d");
//draw a circle
ctx.beginPath();
ctx.arc(x, y, 10, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
};
$scope.test="test";
});
Any help appreciated.
So the problem here is not using canvas correctly.
You need to add an ID, Class or target all canvas elements, In this case I added an ID to your canvas element this way I can target it with document.getElementById
<canvas id="canvas" ng-click="doClick($event)" width="600" height= "600"></canvas>
And in your javascript you weren't targeting the canvas element and applying the context to it.
So this is what your new doubleCLick function will look like:
$scope.doClick = function(event){
var x = event.clientX;
var y = event.clientY;
var offsetX = event.offsetX;
var offsetY = event.offsetY;
alert(x, y, offsetX, offsetY);
/// These are the 2 new lines, see you target the canvas element then apply it to getContext
var canvasElement = document.getElementById("canvas");
var ctx = canvasElement.getContext("2d");
//draw a circle
ctx.beginPath();
ctx.arc(x, y, 10, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
};
I still recommend putting this code in a service.