I'm trying to get the area of a polygone draw onclick in a canvas element
In the image above I try to get the area inside the red point which has a some opacity.
Is there anyway to do that "on the fly" which mean for each polygon draw.
I've already seen earcut.js which allow triangulation but I don't really understand how to get area whith this
var canvas = $('canvas');
var context = canvas[0].getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
$(canvas).attr({
width : this.width,
height: this.height
});
context.drawImage(imageObj,0,0);
};
imageObj.src = 'https://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
var clicks = [];
function drawPolygon(){
context.fillStyle = 'rgba(100,100,100,0.5)';
context.strokeStyle = "#df4b26";
context.lineWidth = 1;
context.beginPath();
context.moveTo(clicks[0].x, clicks[0].y);
for(var i=1; i < clicks.length; i++) {
context.lineTo(clicks[i].x,clicks[i].y);
}
context.closePath();
context.fill();
context.stroke();
};
function drawPoints(){
context.strokeStyle = "#df4b26";
context.lineJoin = "round";
context.lineWidth = 5;
for(var i=0; i < clicks.length; i++){
context.beginPath();
context.arc(clicks[i].x, clicks[i].y, 3, 0, 2 * Math.PI, false);
context.fillStyle = '#ffffff';
context.fill();
context.lineWidth = 5;
context.stroke();
}
};
function redraw(){
canvas.width = canvas.width; // Clears the canvas
context.drawImage(imageObj,0,0);
drawPolygon();
drawPoints();
};
canvas
.mouseup(function (e) {
clicks.push({
x: e.offsetX,
y: e.offsetY
});
redraw();
});
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>draw polygon with canvas</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<canvas width="600" height="400"></canvas>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
There is very simple algorithm to calculate area of polygon with given vertex coordinates: Shoelace formula
A = 1/2* Sum((x[i+1] + x[i]) * ([y[i+1] - y[i]))
(note indexes wrap in circular manner, so x[n]=x[0])
that might be implemented in a single loop.
Related
I'm trying to have an image on my website become saturated at the same location the mouse is. When the mouse moves the saturation effect goes with it, and the area previously hovered over becomes grayscale again. I'm thinking this effect could be accomplished using saturate(), however I haven't had any success with it. Additionally, I would like the effect to be circular without hard edges similar to this.
Example of what it would look like (orange arrow indicating where the mouse is).
Any help or insight would be appreciated, thanks!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content= "width=device-width, initial-scale=1.0" />
</head>
<script>
const size = 250;
var radius = 30;
var rad = Math.PI / 180;
var canvas = document.querySelector("canvas")
var ctx = canvas.getContext("2d");
canvas.width = size;
canvas.height = size;
var image = new Image();
image.onload = demo
image.src = "https://picsum.photos/250"
function draw_circle(x, y, radius) {
ctx.clearRect(0, 0, size, size);
ctx.drawImage(image, 0, 0); // image to change
ctx.globalCompositeOperation = "saturation";
ctx.beginPath();
ctx.fillStyle = "hsl(0,100%,50%)"; // saturation at 100%
ctx.arc(x, y, radius, 0, 360 * rad, false);
ctx.fill()
ctx.closePath();
ctx.globalCompositeOperation = "source-over"; // restore default comp
}
function demo() {
ctx.drawImage(image, 0, 0); // image to change
canvas.addEventListener('mousemove', function(ev) {
var cx = ev.offsetX
var cy = ev.offsetY
draw_circle(cx, cy, radius)
})
}
</script>
<canvas></canvas>
</html>
Using a canvas we can try. Here's a start inspired by How can I adjust the huse, saturation, and lightness of in image in HTML5 Canvas?.
const size = 250;
var radius = 30;
var rad = Math.PI / 180;
var canvas = document.querySelector("canvas")
var ctx = canvas.getContext("2d");
canvas.width = size;
canvas.height = size;
var image = new Image();
image.onload = demo
image.src = "https://picsum.photos/250"
function draw_circle(x, y, radius) {
ctx.clearRect(0, 0, size, size);
ctx.drawImage(image, 0, 0); // image to change
ctx.globalCompositeOperation = "saturation";
ctx.beginPath();
ctx.fillStyle = "hsl(0,100%,50%)"; // saturation at 100%
ctx.arc(x, y, radius, 0, 360 * rad, false);
ctx.fill()
ctx.closePath();
ctx.globalCompositeOperation = "source-over"; // restore default comp
}
function demo() {
ctx.drawImage(image, 0, 0); // image to change
canvas.addEventListener('mousemove', function(ev) {
var cx = ev.offsetX
var cy = ev.offsetY
draw_circle(cx, cy, radius)
})
}
<canvas></canvas>
This is a simple answer (change the logic of the program as you want):
<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
width: 200px;
height: 150px;
}
.image {
width: 100%;
height: 100%;
}
</style>
<script>
const width = 50;
const height = 50;
function create() {
const element = document.createElement("div");
element.id = "filtered";
element.style.width = `${width}px`;
element.style.height = `${height}px`;
element.style.borderRadius = "50%";
element.style.position = "absolute";
element.style.backgroundColor = "red";
element.style.opacity = "0.2";
element.style.zIndex = "2";
return element;
}
function changePos(e) {
x = e.clientX;
y = e.clientY;
let element = document.getElementById("filtered");
if (!element) {
element = create();
document.getElementById("focusArea").appendChild(element);
}
element.style.left = `${x - width / 2}px`;
element.style.top = `${y - height / 2}px`;
}
function removeElement() {
if (document.getElementById("filtered")) {
document.getElementById("filtered").remove();
}
}
</script>
</head>
<body>
<div
id="focusArea"
onmouseleave="removeElement()"
onmousemove="changePos(event)"
class="relative"
>
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/800px-Image_created_with_a_mobile_phone.png"
class="image"
/>
</div>
</body>
</html>
I wrote the following code which is similar to my objective but falls short; because I want to fill inside the text in multiple colors; currently only in #FF00FF.
Playground
I think the problem is that I don't know how to use the text "ABC" as the clipping path. Please show me how to do it, or any answer equivalent for my objective.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas</title>
<script type="text/javascript">
function test() {
var canvas = document.getElementById('sample');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
for(let i=1;i<100;i++){
//mock1: ctx.fillStyle = "rgb(" + [i, i, i] + ")";
ctx.moveTo(0,5*i);
ctx.lineTo(380,5*i);
ctx.lineTo(300,5*i+3);
ctx.lineTo(0,5*i+3);
ctx.lineTo(0,5*i);
}
ctx.closePath();
ctx.clip();
ctx.font = "bold 72px 'Sans-selif'";
ctx.fillStyle = "#FF00FF";
ctx.fillText("ABC", 90, 60);
}
}
</script>
</head>
<body onLoad="test()">
<h2>Canvas</h2>
<canvas width="300" height="150" id="sample" style="background-color:yellow;">
</canvas>
</body>
</html>
The 2DCanvas API unfortunately doesn't expose the text's contour in a way it could be used as a Path2D or in methods like clip() or isPointInPath().
However for what you wish to do, you don't need a path, this can be done by using compositing instead of clipping:
var canvas = document.getElementById('sample');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// draw the full lines first
ctx.beginPath();
for (let i = 1; i < 100; i++) {
ctx.moveTo(0, 5 * i);
ctx.lineTo(380, 5 * i);
ctx.lineTo(300, 5 * i + 3);
ctx.lineTo(0, 5 * i + 3);
ctx.lineTo(0, 5 * i);
}
ctx.fillStyle = "#00FF00";
ctx.fill();
// with this mode
// every previous pixel that is not under the next drawing
// will get cleared
ctx.globalCompositeOperation = "destination-atop"
ctx.font = "bold 72px 'Sans-serif'";
ctx.fillStyle = "#FF00FF";
ctx.fillText("ABC", 90, 60);
// reset to default mode
ctx.globalCompositeOperation = "source-over"
}
<canvas width="300" height="150" id="sample" style="background-color:yellow;"></canvas>
I am new to HTML programming, and I am trying to make a shooter game set in space.
I have this code so far:
<!DOCTYPE html>
<html>
<head>
<title>
Shooter
</title>
<style>
body{
background-color: blue;
}
</style>
</head>
<body>
<canvas width='1000' height='500' id='myCanvas'></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var radius = 1;
ctx.fillStyle = 'white'
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.fillStyle = 'rgb(0, 0, 0)'
ctx.fillRect(1, 1, canvas.width - 2, canvas.height - 2)
var i=0;
var j=0;
for (i=0; i < 1000; i++){
for (j=0; j < 500; j++){
if (Math.random() > 0.999) {
ctx.beginPath();
ctx.arc(i, j, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = 'white';
ctx.fill();
ctx.lineWidth = 0;
ctx.strokeStyle = '#FFFFFF';
ctx.stroke();
ctx.closePath();
}
}
}
</script>
</body>
</html>
and I want to make a loop starting after the definition of radius and ending before the </script> tag, and neither draw=function() nor while(true) work, the entire script has no effect if I add them.
In My case i have performed path clipping and then draw a image in clipped region. But it does not working.
here my code.`
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var offset = 50;
/*
* save() allows us to save the canvas context before
* defining the clipping region so that we can return
* to the default state later on
*/
context.save();
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI, false);
context.clip();
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 69, 50);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth- vader.jpg';
</script>
</body>
</html>
Now image render without clipping.
Please share your valuable key to do this.
I have a simple straight line drawn by a bezier curve.The challenge is to change the position it transition i.e if the height of curve increases or decreases,it should happen in transition,not all of a sudden.So my question is to provide the transition on mouseover of canvas??how is it possible to provide transition to a curve?
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d")
ctx.lineWidth = 6;
ctx.strokeStyle = "#333";
ctx.beginPath();
ctx.moveTo(328, 347);
ctx.bezierCurveTo(326, 387, 326, 386, 326, 420);
ctx.stroke();
You can use requestAnimationFrame to animate a curve on mouseenter.
This is the function that does the animation:
Best practices are now shifting to use requestAnimationFrame instead of setInterval. This code wraps the RAF inside a timeout in order to control the frame rate.
function draw() {
setTimeout(function() {
// request another loop
requestAnimationFrame(draw);
// animate the control point
cpY+=movement;
if (cpY<50 || cpY>250){movement= -movement;}
// draw the new bezier
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.beginPath();
ctx.moveTo(100,150);
ctx.quadraticCurveTo(150,cpY,200,150);
ctx.lineWidth=10;
ctx.stroke();
}, 1000 / fps);
}
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/p5snk/
<!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 cpY = 150;
var movement = -8;
var fps = 60;
$("#canvas").mouseenter(function () {
cpY = 150;
movement = -10;
draw();
});
$("#canvas").mouseleave(function () {
cpY = 50;
movement = 15;
draw();
});
drawLine();
function drawLine() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(100, 150);
ctx.lineTo(200, 150);
ctx.lineWidth = 10;
ctx.stroke();
}
function draw() {
setTimeout(function () {
if (cpY < 50) {
return;
}
if (cpY > 150) {
drawLine();
return;
}
// request another loop
requestAnimationFrame(draw);
// animate the control point
cpY += movement;
// draw the new bezier
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(100, 150);
ctx.quadraticCurveTo(150, cpY, 200, 150);
ctx.lineWidth = 10;
ctx.stroke();
}, 1000 / fps);
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>