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>
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'm working with HTML5 Canvas now. I have one image file and and a mug image file. I want the image file to be drawn on that cylinder surface. Something like the images below.
Are there any Javascript canvas (or maybe SVG) libraries that can help me archive that?
Thank you very much
You can achieve your "wrap" effect by slicing your image into 1px wide vertical slices and changing the "Y" coordinate of each slice to fit the curve of your cup.
Here's example code that uses this technique to "stretch" an image.
Feel free to modify this code to fit along the curve of your cup.
Example code and a Demo: http://jsfiddle.net/m1erickson/krhQW/
<!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 img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/warp.png";
function start(){
var iw=img.width;
var ih=img.height;
canvas.width=iw+20;
canvas.height=ih+20;
var x1=0;
var y1=50;
var x2=iw;
var y2=0
var x3=0;
var y3=ih-50;
var x4=iw;
var y4=ih;
// calc line equations slope & b (m,b)
var m1=Math.tan( Math.atan2((y2-y1),(x2-x1)) );
var b1=y2-m1*x2;
var m2=Math.tan( Math.atan2((y4-y3),(x4-x3)) );
var b2=y4-m2*x4;
// draw vertical slices
for(var X=0;X<iw;X++){
var yTop=m1*X+b1;
var yBottom=m2*X+b2;
ctx.drawImage( img,X,0,1,ih, X,yTop,1,yBottom-yTop );
}
// outline
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.lineTo(x4,y4);
ctx.lineTo(x3,y3);
ctx.closePath();
ctx.stroke();
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
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>
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>
I am an intermediate in javascript. I am making an app for children .. I am developing in it HTML5/javascript. My app motive is to select the letter and practice them by sketching the outline of letters..
Here is my app design in below picture
In the app I want to select the color of the required one from the colour given in pencil and paint in the outline of A. and I have to erase with the eraser given..
I had almost finished the app except the colouring part..
Please anyone help and guide me how to do this..
I just want to know how to make this to colour outline by selecting the colours.. if there any code available or demo available please tell me about that.
Experts shed light on this problem
[Revised answer based on changed request]
Here’s how to let the child draw anywhere within a bounding box around the letter
First, define the area that the drawing will be restricted to.
Any drag-draws outside the drawable area won't be visible.
// define the drawable area
var minX=60;
var maxX=250;
var minY=140;
var maxY=380;
Then in mousemove, draw only if the mouse is inside that drawable area:
if(mouseX>minX && mouseX<maxX && mouseY>minY && mouseY<maxY){
ctx.beginPath();
ctx.moveTo(startX,startY);
ctx.lineTo(mouseX,mouseY);
ctx.stroke();
}
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/tAkAy/
<!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; }
#wrapper{
position:relative;
width:637px;
height:477px;
}
#canvas,#bkImg{
position:absolute; top:0px; left:0px;
border:1px solid green;
width:100%;
height:100%;
}
#canvas{
border:1px solid red;
}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.strokeStyle="red";
ctx.lineWidth=25;
ctx.lineCap="round";
// define the drawable area
// any drag-draws outside the drawable area won't be visible
var minX=60;
var maxX=250;
var minY=140;
var maxY=380;
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var startX;
var startY;
var isDown=false;
function handleMouseDown(e){
startX=parseInt(e.clientX-offsetX);
startY=parseInt(e.clientY-offsetY);
isDown=true;
}
function handleMouseUp(e){
if(!isDown){return;}
isDown=false;
}
function handleMouseMove(e){
if(!isDown){return;}
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
if(mouseX>minX && mouseX<maxX && mouseY>minY && mouseY<maxY){
ctx.beginPath();
ctx.moveTo(startX,startY);
ctx.lineTo(mouseX,mouseY);
ctx.stroke();
}
startX=mouseX;
startY=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);});
}); // end $(function(){});
</script>
</head>
<body>
<div id="wrapper">
<img id="bkImg" src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/game1.png" width=637 height=477>
<canvas id="canvas" width=637 height=477></canvas>
</div>
</body>
</html>
[ Original answer ]
How to draw lines on a canvas in a selected color
Here is some code for you to start with.
The important points are:
Mousedown starts a line and sets it beginning point
Mouseup ends a line and sets its endpoint. This is a permanent line.
Mousemove draws a temporary line until the user releases the mouse.
All permanent lines must be redrawn when a temporary line is being drawn because the canvas must be erased to create the “moving” temporary line.
Html canvas draws a line using it's context like this:
function drawLine(line){
ctx.beginPath();
ctx.moveTo(line.x1,line.y1);
ctx.lineTo(line.x2,line.y2);
ctx.stroke();
}
To set/change the line color, you set the context's strokeStyle:
context.strokeStyle="blue";
To erase all drawings on the canvas, you use context's clearRect:
context.clearRect(0,0,canvas.width,canvas.height);
If you're not used to specifying hit zones, it's pretty simple.
Specify a bounding box (top-left and bottom-right) of the area you might hit (eg. the blue crayon)
Then if the mouse clicks inside that bounding box, you have a hit.
The canvas is layered over the game image and all lines are being drawn on the canvas, not the image.
The rest is just straightforward javascript stuff.
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/G6eWn/
<!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; }
#wrapper{
position:relative;
width:637px;
height:477px;
}
#canvas,#bkImg{
position:absolute; top:0px; left:0px;
border:1px solid green;
width:100%;
height:100%;
}
#canvas{
border:1px solid red;
}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.strokeStyle="red";
ctx.lineWidth=25;
ctx.lineCap="round";
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var startX;
var startY;
var isDown=false;
var lines=[];
var eraser={x:446,y:413,right:516,bottom:475};
var pens=[
{x:240,y:413,right:275,bottom:475,color:"red"},
{x:276,y:413,right:308,bottom:475,color:"green"},
{x:309,y:413,right:341,bottom:475,color:"orange"},
{x:342,y:413,right:375,bottom:475,color:"blue"},
{x:376,y:413,right:412,bottom:475,color:"yellow"},
{x:412,y:413,right:447,bottom:475,color:"pink"},
];
function selectPenColor(x,y){
for(var i=0;i<pens.length;i++){
var pen=pens[i];
if(x>=pen.x && x<=pen.right && y>=pen.y && y<=pen.bottom){
ctx.strokeStyle=pen.color;
drawLines();
return(true);
}
}
return(false);
}
function drawLines(){
ctx.clearRect(0,0,canvas.width,canvas.height);
for(var i=0;i<lines.length;i++){
drawLine(lines[i]);
}
}
function drawLine(line){
ctx.beginPath();
ctx.moveTo(line.x1,line.y1);
ctx.lineTo(line.x2,line.y2);
ctx.stroke();
}
function selectEraser(x,y){
if(x>=eraser.x && x<=eraser.right && y>=eraser.y && y<=eraser.bottom){
lines=[];
ctx.clearRect(0,0,canvas.width,canvas.height);
return(true);
}
return(false);
}
function handleMouseDown(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// select a pen color or erase
// if so, don't start a line
if(selectPenColor(mouseX,mouseY)){return;}
if(selectEraser(mouseX,mouseY)){return;}
startX=mouseX;
startY=mouseY;
isDown=true;
}
function handleMouseUp(e){
if(!isDown){return;}
isDown=false;
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
lines.push({x1:startX,y1:startY,x2:mouseX,y2:mouseY});
drawLines();
}
function handleMouseOut(e){
handleMouseUp(e);
}
function handleMouseMove(e){
if(!isDown){return;}
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
drawLines();
drawLine({x1:startX,y1:startY,x2:mouseX,y2: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);});
}); // end $(function(){});
</script>
</head>
<body>
<div id="wrapper">
<img id="bkImg" src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/game1.png" width=637 height=477>
<canvas id="canvas" width=637 height=477></canvas>
</div>
</body>
</html>