I am trying (and failing) miserably with Easel JS and Canvas. I'm a bit new to canvas in general and learning JS as well. I am basically trying to make a canvas that I can update with colors, that are passed through a button click.
I have made a Fiddle to show my work so far.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>IllustratorSetup</title>
<script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>
<script>
var stage = new createjs.Stage("canvas");
var circle = new createjs.Shape();
function drawRectangle(){
var rect = new createjs.Shape();
rect.graphics.beginFill("#000").drawRect(10, 10, 80, 80);
stage.addChild(rect);
stage.update();
}
function drawShapes(){
drawRectangle();
stage.update();
}
</script>
</head>
<body onload="drawShapes()">
<canvas id="canvas" width="500" height="300"></canvas>
<button onclick="drawRectangle('#ff0000')">Click me for red</button>
</body>
</html>
Your demo likely doesn't work because you are defining your stage before the body onload, and passing it the ID of your canvas (which uses a document.getElementById under the hood). The canvas element won't be available until it is created in the body.
I recommend moving your code that isn't in a function to an init(), or even put it into the drawShapes method.
var stage, circle; // Keep them global
function drawRectangle(){
var rect = new createjs.Shape();
rect.graphics.beginFill("#000").drawRect(10, 10, 80, 80);
stage.addChild(rect);
//stage.update(); // Unnecessary, since it is called in drawShapes.
}
function drawShapes(){
stage = new createjs.Stage("canvas");
circle = new createjs.Shape();
drawRectangle();
stage.update();
}
You can also define your scripts in the body, after the canvas element, so that they initialize after the element is ready.
Note that your fiddle doesn't have the createjs libraries in it, and that JSFiddle will fire the code part of the fiddle during the onload event, so you may not see the issue you are having locally.
I need your help , my question is can we adjust the transparency of drawn line on mouse move??
I wrote this code to draw tow lines and I added the addEventListener to get the coordinates of mouse but my problem is that I do not know how to adjust the transparency when the mouse is moving on the line.
<body>
<canvas id="drawImage" width="900" height="900" style="background-color:black"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("drawImage");
var cont = canvas.getContext("2d");
cont.beginPath();
cont.lineWidth=15;
cont.strokeStyle="red";
cont.moveTo(0,0);
cont.lineTo(100,100);
cont.stroke();
cont.save();
cont.beginPath();
cont.strokeStyle="yellow";
cont.moveTo(100,100);
cont.lineTo(100,150);
cont.stroke();
cont.save();
canvas.addEventListener("mousemove", function(event {});
</script>
</body>
thanx every body.
You can create a function that alters transparency with each stroke using .globalAlpha
A Demo: http://jsfiddle.net/m1erickson/dQFvm/
Example function:
function drawAlphaLine(x0,y0,x1,y1,strokeColor,alpha){
ctx.save();
ctx.beginPath();
ctx.moveTo(x0,y0);
ctx.lineTo(x1,y1);
ctx.globalAlpha=alpha;
ctx.strokeStyle=strokeColor;
ctx.stroke();
ctx.restore();
}
Writing a simple script to have two buttons. One button animates a "painting" feature where rectangles follow the cursor around the canvas. The other button would display a rectangle that follows the canvas but doesn't leave a trail like the other. I have the buttons linked to do different functions. Right now the follow button doesn't work, it does clear the canvas but it still allows you to paint. It seems that the paint function is still running after I hit the follow button. Any help is appreciated.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas</title>
</head>
<body>
<input type="button" value="Paint" onclick="isPaint()">
<input type="button" value="Follow" onclick="isFollow()">
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
function isPaint(){
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
//change draw color
ctx.fillStyle = "#FF0000";
ctx.clearRect(0,0,500,500);
canvas.addEventListener("mousemove", function(event) {
ctx.fillRect(event.x,event.y,10,10);
})
}
function isFollow(){
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
//change draw color
ctx.fillStyle = "#FF0000";
ctx.clearRect(0,0,500,500);
}
</script>
</body>
</html>
Work for me : http://jsfiddle.net/XF7m4/1/
Using document.getElementById("paint").onclick= function (){
PS :And think to remove the mousemouse listener ;)
To achieve what you are trying to do you will need to enhance your code a little more.
The main idea is to bind the mousemove event only once and clear the canvas if it is to behave like a follow.
Try using the following code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Canvas</title>
</head>
<body>
<input type="button" value="Paint" onclick="CanvasPainter.paint()" />
<input type="button" value="Follow" onclick="CanvasPainter.follow()" />
<canvas id="myCanvas" width="500" height="500"></canvas>
<script type="text/javascript">
(function () {
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
//change draw color
ctx.fillStyle = "#FF0000";
var CanvasPainter = {
isPaint: false,
isFollow: false,
paint: function () {
this.isPaint = true;
this.isFollow = false;
return;
},
follow: function () {
this.isPaint = false;
this.isFollow = true;
return;
}
};
window.CanvasPainter = CanvasPainter;
canvas.addEventListener("mousemove", function (event) {
if (CanvasPainter.isPaint || CanvasPainter.isFollow) {
if (CanvasPainter.isFollow) {
// Clear canvas on every mousemove if it is a follow
ctx.clearRect(0, 0, 500, 500);
}
ctx.fillRect(event.x, event.y, 10, 10);
}
return;
});
return;
})();
</script>
</body>
</html>
Hope this helps!
Your isPaint() function is adding an event listener for "mousemove" to the canvas, but it isn't getting removed in the isFollow() function. If you remove your listener in the isFollow() function this should fix your problem.
I have a project creating layouts and i have decided to do it with canvas element.I created a function that takes 4 args.
function fillArc(camvas,x,y,w,h)
{
canv.beginPath();
var canv = document.getElementById("camvas");
var context = canv.getContext('2d');
context.strokeStyle="#FFFFFF";
context.moveTo(x+5,y);
context.lineTo(w-5,y);
context.quadraticCurveTo(w,y,w,y+5);
context.lineTo(w,h-5);
context.quadraticCurveTo(w,h,w-5,h);
context.lineTo(x+5,h);
context.quadraticCurveTo(x,h,x,h-5);
context.lineTo(x,y+5);
context.quadraticCurveTo(x,y,x+5,y);
context.stroke();
canv.closePath();
}
I have several canvas elements so i want to create this border-radius box in different areas.I assumed that a call like:
<canvas width="500" height="500" id="canvaslayouts">
</canvas>
<script>
fillArc(canvaslayouts,10,10,50,50);
</script>
But this doesn't seem to work.Can anyone point my mistake please.
jsFiddle Demo
Place your function and the call to it in a script element
Pass in a string which matches the id of the canvas you wish to draw on
Use the context, not the canvas, to access the drawing API
<script>
function fillArc(camvas,x,y,w,h)
{
var canv = document.getElementById(camvas);
var context = canv.getContext('2d');
context.beginPath();
context.strokeStyle="#ffffff";
context.moveTo(x+5,y);
context.lineTo(w-5,y);
context.quadraticCurveTo(w,y,w,y+5);
context.lineTo(w,h-5);
context.quadraticCurveTo(w,h,w-5,h);
context.lineTo(x+5,h);
context.quadraticCurveTo(x,h,x,h-5);
context.lineTo(x,y+5);
context.quadraticCurveTo(x,y,x+5,y);
context.stroke();
context.closePath();
}
fillArc("canvaslayouts",10,10,50,50);
</script>
Putting it in a <script> block should do the trick:
<canvas width="500" height="500" id="canvaslayouts"></canvas>
<script>
fillArc(canvaslayouts,10,10,50,50);
</script>
Also, note that your fillArc() function definition (or any other executable JavaScript that you may have) should also be in a <script> block.
Well, a few things:
You're never using the camvas variable.
You're always refering to #camvas.
You call canv.beginPath() before setting canv to anything.
Your javascript code in the canvas is not in script tags
Your javascript code in the canvas tag calls the function with canvaslayouts as the first parameter. This means you're searching for a variable named "canvaslayouts" and not an ID. Change it to "canvaslayouts" to specify that it's a string to be used in getElementById.
The correct code should be something like this:
function fillArc(camvas,x,y,w,h)
{
//Changed to use the variable instead, and moved it to the start
var canv = document.getElementById(camvas);
canv.beginPath();
var context = canv.getContext('2d');
context.strokeStyle="#FFFFFF";
context.moveTo(x+5,y);
context.lineTo(w-5,y);
context.quadraticCurveTo(w,y,w,y+5);
context.lineTo(w,h-5);
context.quadraticCurveTo(w,h,w-5,h);
context.lineTo(x+5,h);
context.quadraticCurveTo(x,h,x,h-5);
context.lineTo(x,y+5);
context.quadraticCurveTo(x,y,x+5,y);
context.stroke();
canv.closePath();
}
and
<canvas width="500" height="500" id="canvaslayouts">
<script type="text/javascript">
//Use a script container
fillArc("canvaslayouts",10,10,50,50); //Use a string, not a variable
</script>
</canvas>
You need to change the .beginPath() and .closePath() calls so that they're applied to the context, and not to the canvas.
That can of course only be done once you've called canv.getContext().
You also need to:
use the correct ID - you've used "camvas" when it should be the variable with that name
put your JS inside <script> tags
i.e.:
<script>
function fillArc(camvas,x,y,w,h)
{
var canv = document.getElementById(camvas);
var context = canv.getContext('2d');
context.beginPath();
context.strokeStyle="#FFFFFF";
context.moveTo(x+5,y);
context.lineTo(w-5,y);
context.quadraticCurveTo(w,y,w,y+5);
context.lineTo(w,h-5);
context.quadraticCurveTo(w,h,w-5,h);
context.lineTo(x+5,h);
context.quadraticCurveTo(x,h,x,h-5);
context.lineTo(x,y+5);
context.quadraticCurveTo(x,y,x+5,y);
context.closePath(); // NB: close the path before you stroke it
context.stroke();
}
</script>
<canvas width="500" height="500" id="canvaslayouts"> </canvas>
<script>
fillArc("canvaslayouts", 10, 10, 50, 50);
</script>
I use this example that allow me to draw into the canvas. http://devfiles.myopera.com/articles/649/example2.html
However, I want to have a button that clears the content of it. This is what I did without luck.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#clearme").click(function() {
var view = $('#imageView');
var context = view[0].getContext('2d');
context.clearRect(550, 550, view.width(), view.height());
});
});
clear
<div id="container">
<canvas id="imageView" width="610" height="680">
</canvas>
</div>
What am I missing here?
Clear the canvas via its API instead:
var view = $('#imageView');
var context = view[0].getContext('2d');
context.clearRect(0, 0, view.width(), view.height());
You have to clear the canvas, empty() is not what you're looking for. Do something like this:
var ctx = canvasEl.getContext('2d');
ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
ctx.beginPath();
Empty() wont clear a canvas. You'll have to use clearRect.