Html5
<canvas id="myCanvas" width="578" height="200"></canvas>
JavaScript
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 50);
context.lineTo(50, 150);
context.lineTo(150, 150);
context.lineTo(100, 50);
context.stroke();
Here's how to hit test your triangle:
You can define your path (as you've defined your triangle)
Listen for mousemove events and determine the mouse position
Use context.isPointInPath(mouseX,mouseY) to test if your mouse is inside the defined triangle.
Example code and a Demo: http://jsfiddle.net/m1erickson/XL93U/
<!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 context=canvas.getContext("2d");
var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
context.beginPath();
context.moveTo(100, 50);
context.lineTo(50, 150);
context.lineTo(150, 150);
context.lineTo(100, 50);
context.stroke();
function handleMouseMove(e){
e.preventDefault();
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
var inside=context.isPointInPath(mouseX,mouseY);
var text=(inside)?"Inside":"Outside";
$("#results").text(text);
}
$("#canvas").mousemove(function(e){handleMouseMove(e);});
}); // end $(function(){});
</script>
</head>
<body>
<h4 id="results">Move mouse in and out of triangle</h4>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
Related
I try to make a simple image editor for load image in a particular person's bill. I want to draw a line-loaded image(i want to cut some bill claim items using the pen tool, I gave the option eraser for editing purposes). I create canvas load images with pen and eraser tools. but I have some issues when eraser the draw line image content also delete. how do I avoid this problem?
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
</head>
<body>
<img id="scream" width="220" height="277" src="download.png" alt="The Scream">
<canvas id="canvas" width=300 height=500></canvas></br>
<button id="pen">Pen</button>
<button id="eraser">Eraser</button>
</body>
</html>
<script type="text/javascript">
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10, 300, 500);
var lastX;
var lastY;
var strokeColor="red";
var strokeWidth=5;
var mouseX;
var mouseY;
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var isMouseDown=false;
function handleMouseDown(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mousedown stuff here
lastX=mouseX;
lastY=mouseY;
isMouseDown=true;
}
function handleMouseUp(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mouseup stuff here
isMouseDown=false;
}
function handleMouseOut(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mouseOut stuff here
isMouseDown=false;
}
function handleMouseMove(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mousemove stuff here
if(isMouseDown){
ctx.beginPath();
if(mode=="pen"){
ctx.globalCompositeOperation="source-over";
ctx.moveTo(lastX,lastY);
ctx.lineTo(mouseX,mouseY);
ctx.stroke();
}else{
ctx.globalCompositeOperation="destination-out";
ctx.arc(lastX,lastY,8,0,Math.PI*2,false);
ctx.fill();
}
lastX=mouseX;
lastY=mouseY;
}
}
$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mousemove(function(e){handleMouseMove(e);});
$("#canvas").mouseup(function(e){handleMouseUp(e);});
$("#canvas").mouseout(function(e){handleMouseOut(e);});
var mode="pen";
$("#pen").click(function(){ mode="pen"; });
$("#eraser").click(function(){ mode="eraser"; });
</script>
I am new one for canvas.I want to know how to draw a line with scrollable canvas window.my expectation is canvas window fit the screen and if line went to out side of the view port then the canvas window is scrollable until to view the end of the line.i try this code.any idea for this problem.Thank you.
<html>
<head>
<head>
<body>
<canvas id="myCanvas" style="border:1px solid #d3d3d3;float: left;" > Your browser does not support the HTML5 canvas tag.</canvas>
<script>
function draw() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(1500,1000);
ctx.stroke();
}
draw();
</script>
</body>
</html>
You can have the browser add scrollbar(s) by wrapping a taller canvas inside a shorter div and setting the shorter div's overflow:scroll.
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(200,1000);
ctx.stroke();
body{ background-color: ivory; }
#viewport{width:320px;height:150px;border:1px solid blue;overflow:scroll;}
#canvas{border:1px solid red; }
<div id=viewport>
<canvas id="canvas" width=300 height=1500></canvas>
</div>
I'm trying to build a sort of generator which lets you put text over an image. Now it's all working great, but i'm trying to create some thumbnails which let me change the background image of the canvas.
Now this is my first attempt with a canvas and i've tried alot of things, but the closest i've come and where i thought my little piece of code would work was, it's given me 0 errors:
function testbackgroundchange() {
img.src = "background_1.jpg";
ctx.clearRect(0, 0, canvas.width, canvas.height);
document.getElementById('scale').value = 1;
document.getElementById('rotate').value = 0;
x = canvas.width/2 - img.width/2;
y = canvas.height/2 - img.height/2;
ctx.drawImage(img,x,y);
imgTransform();
}
So what i'm trying to here is onclick of a thumbnail, change the background image of the canvas.
I've added an JSFiddle for better understanding of the problem: http://jsfiddle.net/29M7P/1/
If anyone could point me in the right direction that would be great. (sorry i'm a beginner)
You can listen for clicks on your thumbnails with thumbnail.onclick
img1.onclick=function(){changeImage(this);};
img2.onclick=function(){changeImage(this);};
And you can change the canvas image like this:
function changeImage(img){
ctx.clearRect(0,0,cw,ch);
ctx.drawImage(img,0,0);
}
A Demo: http://jsfiddle.net/m1erickson/88n3K/
Code example:
<!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 cw=canvas.width;
var ch=canvas.height;
var imgCount=2;
var img1=new Image();img1.crossOrigin="anonymous";img1.onload=start;img1.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-1.jpg";
var img2=new Image();img1.crossOrigin="anonymous";img2.onload=start;img2.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house204-2.jpg";
function start(){
if(--imgCount>0){return;}
document.body.appendChild(img1);
document.body.appendChild(img2);
img1.onclick=function(){changeImage(this);};
img2.onclick=function(){changeImage(this);};
}
function changeImage(img){
ctx.clearRect(0,0,cw,ch);
ctx.drawImage(img,0,0);
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas><br>
<h4>Click on an image below to drawImage to canvas</h4><br>
</body>
</html>
I am trying to rotate arc in canvas on mouse movement, but its not working.
here is my code:
http://jsfiddle.net/nNffu/
var c=document.getElementById("c");
var ctx=c.getContext('2d');
c.width=window.innerWidth;
c.height=window.innerHeight;
var width=c.width;
var height=c.height;
draw();
function draw(){
var cx=width/2;
var cy=height/2;
ctx.beginPath();
ctx.strokeStyle="#fff";
ctx.arc(cx,cy,100,0,Math.PI);
ctx.stroke();
}
document.addEventListener("mousemove",function(e){
var p1=(width/2)-e.clientX;
var p2=(height/2)-e.clientY;
var angle=Math.atan2(p2, p1);
ctx.clearRect(0,0,width,height);
ctx.beginPath();
ctx.strokeStyle="#fff";
ctx.arc(width/2,height/2,100,0,Math.PI);
// ctx.translate(width/2,height/2);
ctx.rotate(angle);
//ctx.translate(0,0);
ctx.stroke();
// ctx.restore();
},false);
It didnt worked. later i want to add more objects but they should not rotate only this semicircle should be in ratation as per mouse movements. i tried other examples with translation which i have commented because it's not working. how can i fix my code to do so?
Do you want a half-circle that rotates in relation to the mouse?
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/jJTsH/
<!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 canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
ctx.lineWidth=3;
ctx.strokeStyle="blue";
var cx=canvas.width/2;
var cy=canvas.height/2;
var radius=75;
function drawArc(cx,cy,mouseX,mouseY){
var dx=mouseX-cx;
var dy=mouseY-cy;
var angle=Math.atan2(dy,dx);
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.beginPath();
ctx.arc(cx,cy,radius,angle,angle+Math.PI);
ctx.stroke();
}
function handleMouseMove(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
drawArc(cx,cy,mouseX,mouseY);
}
$("#canvas").mousemove(function(e){handleMouseMove(e);});
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
I want to make an element where the text is transparent and the rest of the div is solid, so that if it's fixed position, you can see through the text to the background.
I'd normally just use an alpha-mapped image for this, however, I need this text to be changed by a user at their whim so that no matter what text is in the element, it will be transparent. The key here though that you can't do with a normal div is having an actual background color on the element that contains the text.
I'm very new to canvas elements, but I'm wondering if it's possible to do with a canvas element, and if so, could you point me in the right direction?
Yes you can do this with canvas .. You can draw a text in canvas with transparency using rgba(red,blue,green,transparency_value)
HTML:
<canvas id="mycanvas" width="200" height="200" style="width:200px; height:200px; border:1px solid;">
</canvas>
Script:
canvas = document.getElementById('mycanvas');
ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillStyle = '#992200';
ctx.rect(0,0,canvas.width,canvas.height);
ctx.fill();
ctx.closePath();
ctx.fillStyle = 'rgba(255,255,255,1)';
ctx.font = '10px verdana';
ctx.textAlign = 'center';
ctx.fillText("No transparency",canvas.width/2,10);
ctx.fillStyle = 'rgba(255,255,255,0.5)';
ctx.font = '10px verdana';
ctx.textAlign = 'center';
ctx.fillText("This is Transparent[0.5]",canvas.width/2,canvas.height/2);
ctx.fillStyle = 'rgba(255,255,255,0.25)';
ctx.font = '10px verdana';
ctx.textAlign = 'center';
ctx.fillText("This is Transparent[0.25]",canvas.width/2,canvas.height - 10);
Live Demo
Note: Setting rgba() should be a string ( Mean should be enclosed in quotes )
See about fillText()
See about fillStyle
See about textAlign
You can also do it with compositing: http://jsfiddle.net/m1erickson/9DLuT/
<!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-image:url("http://images4.fanpop.com/image/photos/23400000/water-water-23444632-2048-1277.jpg"); }
canvas{border:1px solid red; position:absolute}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.save();
ctx.beginPath();
ctx.fillStyle="black";
ctx.rect(0,0,canvas.width,canvas.height);
ctx.fill();
ctx.font="144pt Verdana";
ctx.globalCompositeOperation="xor";
ctx.beginPath();
ctx.fillText("See",30,200);
ctx.fill();
ctx.restore();
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=400 height=300></canvas>
</body>
</html>
You could also consider SVG clipping masks which is much simpler and doesn't suffer from the 'black box' syndrome that is canvas.
I'm trying to writing you something for specifically your problem.
In the meantime you might find this article will help.
http://demosthenes.info/blog/481/Text-Clipping-Masks-With-SVG