Is it possible to implement the paint text feature in javascript on a canvas?
A text button say "A" ,on click of this like in paint one should be able to draw a text box on canvas wherever the user clicked mouse.Also should be able to type text init.Also should be able to move this text box anywhere on the canvas.
Any suggestion/solution is appreciable.
Thanks.
This basic framework should get you started.
This code allows the user to enter their text.
Then they click on the canvas and their text is drawn at the mouse position.
Of course, you will want to take it from here to design it to fit your needs.
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/7GHvj/
<!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>
<!--[if lt IE 9]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var lastX;
var lastY;
var strokeColor="red";
var strokeWidth=2;
var canMouseX;
var canMouseY;
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
function handleMouseDown(e){
canMouseX=parseInt(e.clientX-offsetX);
canMouseY=parseInt(e.clientY-offsetY);
$("#downlog").html("Down: "+ canMouseX + " / " + canMouseY);
// Put your mousedown stuff here
var text=document.getElementById("text").value;
ctx.font = 'italic 20px sans-serif';
ctx.fillText(text,canMouseX,canMouseY);
}
$("#canvas").mousedown(function(e){handleMouseDown(e);});
}); // end $(function(){});
</script>
</head>
<body>
<p>Enter the text here first</p>
<input id="text" type="text" name="text" value="My Text."><br>
<p>Then click on the canvas to draw the text.</p>
<canvas id="canvas" width=576 height=307></canvas>
</body>
</html>
Related
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>
guys!
I have a problem.
I want create on, two or more rectangles in a space proportionally.
So, a have the canvas in 600x800px and I have a rectangle in 200x400px, I need when I click in a button, create more one rectangle in the some space of other. staying, 100x200 and 100x200 for both rectangles.
Some one?
Thanks!
All you have to do is:
Keep a Y-coordinate variable,
Draw your next rectangle at that Y,
Increment Y by the rectangle height (plus any spacing between rects that you desire)
Here's code and a Demo: http://jsfiddle.net/m1erickson/czMXH/
<!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 y=10;
var spacer=8;
$("#again").click(function(){
ctx.fillStyle=randomColor();
ctx.fillRect(10,y,100,66);
ctx.strokeStyle="black";
ctx.strokeRect(10,y,100,66);
y+=66+spacer;
});
function randomColor(){
return('#'+Math.floor(Math.random()*16777215).toString(16));
}
}); // end $(function(){});
</script>
</head>
<body>
<button id="again">Add</button><br>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
Like the standard paint program in windows, I'm trying to create a very basic sketch canvas program where the the user can select a ruler tool to draw with on the canvas. How do I achieve this?
I'm quite a beginner so I'd appreciate if the answer is as simple as possible...
Thanks!!
You can use 2 overlapping canvases wrapped in a container div.
Then draw your ruler marks on the bottom canvas.
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/8hVC2/
<!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; padding:20px; }
#wrapper{
position:relative;
width:315px;
height:215px;
}
#canvasBottom{
position:absolute; top:0px; left:0px;
border:1px solid red;
}
#canvasTop{
position:absolute; top:15px; left:15px;
border:1px solid red;
}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvasTop");
var ctx=canvas.getContext("2d");
var canvas2=document.getElementById("canvasBottom");
var ctx2=canvas2.getContext("2d");
ctx2.beginPath();
for(var i=0;i<canvas.width;i+=10){
var y=(i/100==parseInt(i/100))?0:10;
ctx2.moveTo(i+15,y);
ctx2.lineTo(i+15,15);
var x=(i/100==parseInt(i/100))?0:10;
ctx2.moveTo(x,i+15);
ctx2.lineTo(15,i+15);
}
ctx2.stroke();
var canvasOffset=$("#canvasTop").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
function handleMouseMove(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
$("#movelog").html("Move: "+ mouseX + " / " + mouseY);
// Put your mousemove stuff here
}
$("#canvasTop").mousemove(function(e){handleMouseMove(e);});
}); // end $(function(){});
</script>
</head>
<body>
<p id="movelog">Move</p>
<div id="wrapper">
<canvas id="canvasBottom" width=315 height=215></canvas>
<canvas id="canvasTop" width=300 height=200></canvas>
</div>
</body>
</html>
If I may suggest you could use my easyCanvas library. It's a library that wraps around standard canvas and let you use it as ordinary but adds some handy functionality (GPL3).
If this is an option you could create what you need simply by doing this assumimg the easyCanvas script is already included:
var ez = new easyCanvas();
// enable background handling when drawing
ez.autoClear = true;
// mouse down/up is handled internally so all we need to draw the line
ez.onmousemove = function(e) {
ez1.line(ez.firstX, ez.firstY, e.x, e.y);
}
(you can use an existing canvas element as well - this will create a canvas that covers the window and auto-resizes it when window size changes, please see documentation for the details).
Update: easyCanvas is now legacy and is located at GitHub to avoid link-rot.
I need to implement an eyedropper tool. I want it so you click the eyedropper button to make it active, then using a onmove it will change the colour of my colour picker and when you click using onclick it will set the colour to the colour picker using:
$('#colorpickerHolder').ColorPickerSetColor(eyeDropperColour);
The variable eyeDropperColour would be set using the onlick based on what colour pixel you are over. I am wondering would I have to do it based on what layer as I have: canvas and canvasCursor.
I have been looking at this guide but I can't make it work for my project? http://palebluepixel.org/2011/11/16/html5-canvas-eyedropper/
Here is my project:
http://www.taffatech.com/Paint.html
I have:
var eyeDropperActive = false;
var eyeDropperColour;
and:
$("#brushEyeDropper").click(function() {
if ( eyeDropperActive == true)
{
eyeDropperActive = false;
}
else if ( eyeDropperActive == false)
{
eyeDropperActive = true;
}
});
Creating a canvas “eyedropper” tool
This is how to read the pixel color at any X/Y on the canvas:
function getPixelColor(x, y) {
var pxData = ctx.getImageData(x,y,1,1);
return("rgb("+pxData.data[0]+","+pxData.data[1]+","+pxData.data[2]+")");
}
The rest is just controlling when to accept the color with a click on the canvas.
var eyedropperIsActive=false;
// Activate reading pixel colors when a #startDropper button is clicked
$("#startDropper").click(function(e){eyedropperIsActive=true;});
// if the tool is active, report the color under the mouse
$("#canvas").mousemove(function(e){handleMouseMove(e);});
// when the user clicks on the canvas, turn off the tool
// (the last color will remain selected)
$("#canvas").click(function(e){eyedropperIsActive=false;});
And here is the mousemove event handler that calls getPixelColor and reports that color
// if the tool is active, report any color under the mouse
function handleMouseMove(e){
if(!eyedropperIsActive){return;}
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mousemove stuff here
var eyedropColor=getPixelColor(mouseX,mouseY);
$("#results").css("backgroundColor",getPixelColor(mouseX,mouseY));
}
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/zpfdv/
<!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; padding:30px; }
canvas{border:1px solid red;}
#results{width:30px; height:30px; border:1px solid blue;}
</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;
var eyedropperIsActive=false;
drawTestColors(20,20,"red");
drawTestColors(100,20,"green");
drawTestColors(180,20,"blue");
function drawTestColors(x,y,color){
ctx.beginPath();
ctx.fillStyle=color;
ctx.rect(x,y,50,50);
ctx.fill();
}
function getPixelColor(x, y) {
var pxData = ctx.getImageData(x,y,1,1);
return("rgb("+pxData.data[0]+","+pxData.data[1]+","+pxData.data[2]+")");
}
function handleMouseMove(e){
if(!eyedropperIsActive){return;}
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mousemove stuff here
var eyedropColor=getPixelColor(mouseX,mouseY);
$("#results").css("backgroundColor",getPixelColor(mouseX,mouseY));
}
$("#canvas").click(function(e){eyedropperIsActive=false;});
$("#canvas").mousemove(function(e){handleMouseMove(e);});
$("#startDropper").click(function(e){eyedropperIsActive=true;});
}); // end $(function(){});
</script>
</head>
<body>
<p>Click "Activate Eyedropper" to read pixel color under the mouse</p>
<p>Click canvas to set the color and de-active the eyedropper</p>
<canvas id="canvas" width=300 height=300></canvas><br>
<button id="startDropper">Activate Eyedropper</button>
<div id="results" width=30 height=30> </div>
</body>
</html>