Java Script html5 Canvas - javascript

On button click I just want to put element in the canvas, but it's not working. Here is the code I have written:
<script language="javascript" type="text/javascript">
function image()
{
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.clear();
ctx.setTransform(-1, 0, 0, 1, 200, 200);
context.clear(true)
var imgobj=new Image();
imgobj.onload=function()
{
ctx.drawImage(imgobj,69,50);
}
imgobj.src='images.jpg';
}
function circle()
{
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.clear();
// do some more drawing
ctx.setTransform(-1, 0, 0, 1, 200, 200);
// do some drawing with the new transform
context.clear(true);
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
}
function line()
{
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.clear();
// do some more drawing
ctx.setTransform(-1, 0, 0, 1, 200, 200);
// do some drawing with the new transform
context.clear(true);
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</head>
<body>
<h1>Demo of HTM5</h1>
<div class="canvas1" align="left">
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #000000;">
</canvas>
<p><button onclick="circle()"> Draw Circle</button></p>
<p><button onclick="line()"> Draw Line</button></p>
<p><button onclick="image()"> Display Image</button></p>
</div>
</body>
</html>


There is no ctx.clear() method on the context object, try instead with:
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
You are also using an unassigned context which you should remove.
Also there is no need to look-up canvas inside the function each time, just do it once in global scope.
And also, in your line method you're missing a beginPath() call.
See fiddle here
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
function image() {
/// use this to clear canvas
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.setTransform(-1, 0, 0, 1, 200, 200);
var imgobj = new Image();
imgobj.onload = function () {
ctx.drawImage(imgobj, 69, 50);
}
imgobj.src = 'images.jpg';
}
function circle() {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
// do some more drawing
ctx.setTransform(-1, 0, 0, 1, 200, 200);
// do some drawing with the new transform
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
}
function line() {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
// do some more drawing
ctx.setTransform(-1, 0, 0, 1, 200, 200);
// do some drawing with the new transform
ctx.beginPath(); /// add a beginPath here
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
}


I think, you are using some wrong approach to clear the canvas. There is no method clear for canvas to clear it.
instead you should use: .clearRect(0, 0, 300, 300);
Here is the sample code:
function circle(){
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.clearRect(0, 0, 300, 300);
// do some more drawing
ctx.setTransform(-1, 0, 0, 1, 200, 200);
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
}
function line(){
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
ctx.clearRect(0, 0, 300, 300);
ctx.setTransform(-1, 0, 0, 1, 200, 200);
// do some drawing with the new transform
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200,100);
ctx.stroke();
}
jsfiddle: http://jsfiddle.net/FumBm/3/
Also, there is no variable with name context in your script. :)

Related

Canvas - Add the resulting image from first canvas to a second one

Hi I already created a round shaped form for the first image in the first canvas, but I didn't succeed to use the dataURL of the first canvas and add it in the second canvas.
Here is my fiddle : http://jsfiddle.net/acbo6m6o/2/
var ctx = document.getElementById('canvas').getContext("2d");
var ctx2 = document.getElementById('canvas2').getContext("2d");
ctx.arc(150,150, 130, 0, Math.PI*2,true); // you can use any shape
ctx.clip();
var img = new Image();
img.addEventListener('load', function(e) {
ctx.drawImage(this, 0, 0, 300, 300);
img2.src=canvas.toDataURL();
}, true);
img.src="https://scontent-mad1-1.xx.fbcdn.net/v/t1.0-9/10400072_76198580294_2746326_n.jpg?oh=b8cc93c35d6badfffb65ab5c9cbfce28&oe=5941AAB6";
img2.src=canvas.toDataURL();
Thank you.

No need to grab the dataURL of first canvas. You can draw the first canvas itself into the second canvas using the drawImage() method :
var ctx = document.getElementById('canvas').getContext("2d");
var ctx2 = document.getElementById('canvas2').getContext("2d");
var img = new Image();
img.src = "https://scontent-mad1-1.xx.fbcdn.net/v/t1.0-9/10400072_76198580294_2746326_n.jpg?oh=b8cc93c35d6badfffb65ab5c9cbfce28&oe=5941AAB6";
img.addEventListener('load', function(e) {
ctx.arc(150, 150, 130, 0, Math.PI * 2, true);
ctx.save();
ctx.clip();
ctx.drawImage(this, 0, 0, 300, 300);
ctx.restore();
ctx2.drawImage(ctx.canvas, 0, 0);
}, true);
#canvas2 {
background-color: lightgrey;
}
<canvas width="300" height="300" id="canvas"></canvas>
<canvas width="300" height="300" id="canvas2"></canvas>

Drawing lights on a canvas

Hi i'm trying to draw lights in a canvas like this:
<canvas id="myCanvas" width="600" height="300"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "rgba(0,0,0,0.75)";
ctx.fillRect(0,0,300,300);
ctx.clearRect(0,0,300,300);
var grd = ctx.createRadialGradient(150,150,0,150,150,150);
grd.addColorStop(0, "rgba(255,255,0,0)");
grd.addColorStop(1, "rgba(0,0,0,0.75)");
ctx.fillStyle = grd;
ctx.fillRect(0,0,300,300);
ctx.clearRect(300,0,600,300);
var grd = ctx.createRadialGradient(450,150,0,450,150,150);
grd.addColorStop(0, "rgba(255,255,0,0)");
grd.addColorStop(1, "rgba(0,0,0,0.75)");
ctx.fillStyle = grd;
ctx.fillRect(300,0,600,300);
</script>
The problem is when the lights overlap
<canvas id="myCanvas" width="500" height="300"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "rgba(0,0,0,0.75)";
ctx.fillRect(0,0,300,300);
ctx.clearRect(0,0,300,300);
var grd = ctx.createRadialGradient(150,150,0,150,150,150);
grd.addColorStop(0, "rgba(255,255,0,0)");
grd.addColorStop(1, "rgba(0,0,0,0.75)");
ctx.fillStyle = grd;
ctx.fillRect(0,0,300,300);
ctx.clearRect(200,0,500,300);
var grd = ctx.createRadialGradient(350,150,0,350,150,150);
grd.addColorStop(0, "rgba(255,255,0,0)");
grd.addColorStop(1, "rgba(0,0,0,0.75)");
ctx.fillStyle = grd;
ctx.fillRect(200,0,500,300);
</script>
I need the lights come together and not overlap
also i need to see an image below the canvas
how can i Solve ?
that's the effect i'm looking for
I've used 2 canvas, 1 for scenery and 1 above for lights
This is almost what i'm looking for , but it remains a bit 'darker where the lights overlap, there is too little light in the center of each light, and it looks like a white light instead of a yellow light
http://jsfiddle.net/vgmc4m87/
Thanks

If you really want to overlap those two gradients, I would suggest a few things,
Get rid of the clearRect()
Change
grd.addColorStop(0, "rgba(255,255,0,0)"); grd.addColorStop(1, "rgba(0,0,0,0.75)");
Such that the second color stop has 0 alpha component, this way the gradient will actually fade out as it goes towards the edge of the circle. And you can actually overlap circles only if they're fading towards the end.
Don't use fillRect(), use arcs instead.
See, https://jsfiddle.net/fL4xffnq/3/. I've not preserved colours, but it should give you a good idea on how to proceed.

jsFiddle : https://jsfiddle.net/CanvasCode/p3k7cwqs/
javascript
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext("2d");
var image = new Image();
image.src = "http://images4.fanpop.com/image/photos/16000000/Beautiful-Cat-cats-16096437-1280-800.jpg";
image.onload = function () {
ctx.drawImage(image, 0, 0, 500, 400);
var grd = ctx.createRadialGradient(150, 150, 0, 0, 150, 200);
grd.addColorStop(0, "rgba(255,255,0,1)");
grd.addColorStop(1, "rgba(0,0,0,0)");
ctx.beginPath();
ctx.fillStyle = grd;
ctx.arc(150, 150, 200, 0, Math.PI * 2, false)
ctx.fill();
var grd = ctx.createRadialGradient(350, 150, 0, 350, 150, 200);
grd.addColorStop(0, "rgba(255,255,0,1)");
grd.addColorStop(1, "rgba(0,0,0,0)");
ctx.beginPath();
ctx.fillStyle = grd;
ctx.arc(350, 150, 200, 0, Math.PI * 2, false)
ctx.fill();
};

Adding to #nisargjhaveri's answer setting ctx.globalCompositeOperation = "lighter" creates a nice effect.
function drawBackground() {
var can = document.getElementById('background');
var ctx = can.getContext('2d');
var grd = ctx.createLinearGradient(0, 0, 0, 150);
grd.addColorStop(0, "rgba(0,255,255,1)");
grd.addColorStop(1, "rgba(30,100,200,1)");
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 500, 150);
var grd = ctx.createLinearGradient(0, 150, 0, 300);
grd.addColorStop(0, "rgba(15,75,25,1)");
grd.addColorStop(1, "rgba(30,150,50,1)");
ctx.fillStyle = grd;
ctx.fillRect(0, 150, 500, 300);
}
drawBackground();
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var bg = document.getElementById("background");
var x1 = 150;
var y1 = 150;
var x2 = 350;
var y2 = 150;
var step1 = {
x: 1,
y: 1
};
var step2 = {
x: -1,
y: 1
};
function loop() {
ctx.save();
ctx.fillStyle = "rgba(0,0,0,1)";
ctx.clearRect(0, 0, 500, 300);
// Create a white to transparent gradient for the circles
// Circle one
var grd = ctx.createRadialGradient(x1, y1, 0, x1, y1, 150);
grd.addColorStop(.75, "rgba(255,255,0,1)");
grd.addColorStop(1, "rgba(255,255,0,0)");
ctx.beginPath();
ctx.fillStyle = grd;
ctx.arc(x1, y1, 150, 0, Math.PI * 2, false)
ctx.fill();
// Circle two
var grd = ctx.createRadialGradient(x2, y2, 0, x2, y2, 150);
grd.addColorStop(.75, "rgba(255,255,255,1)");
grd.addColorStop(1, "rgba(255,255,255,0)");
ctx.beginPath();
ctx.fillStyle = grd;
ctx.arc(x2, y2, 150, 0, Math.PI * 2, false)
ctx.fill();
// Fill the white part with the background image.
ctx.globalCompositeOperation = "source-atop";
ctx.drawImage(bg, 0, 0, bg.width, bg.height);
// Fill the transparent part with gray.
ctx.globalCompositeOperation = "destination-atop"
ctx.fillStyle = "rgba(63,63,63,1)";
ctx.fillRect(0, 0, c.width, c.height);
// clear the globalCompositeOperation
ctx.restore();
step1.x = x1 > c.width ? -1 : x1 < 0 ? 1 : step1.x;
step1.y = y1 > c.height ? -1 : y1 < 0 ? 1 : step1.y;
step2.x = x2 > c.width ? -1 : x2 < 0 ? 1 : step2.x;
step2.y = y2 > c.height ? -1 : y2 < 0 ? 1 : step2.y;
x1 += step1.x;
y1 += step1.y;
x2 += step2.x;
y2 += step2.y;
setTimeout(loop, 1000 / 60);
}
loop()
<canvas id="background" width="500" height="300" style='display:none'></canvas>
<canvas id="myCanvas" width="500" height="300"></canvas>

How do I clearRect in my JS canvas?

I may be having a Homer moment here but I am trying to clear the canvas at every iteration to show the square rotating but the clearRect doesn't seem to work.
Can anyone see what I am doing wrong?
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var angle = 0;
setInterval(function() {
angle++;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.translate(100, 100);
ctx.rotate(angle);
ctx.rect(0, 0, 30, 30);
ctx.stroke();
ctx.restore();
}, 50);
<canvas width='300' height='300' id='myCanvas'></canvas>

You are missing a beginPath() in the code to clear the path. This will cause all rectangles to be redraw each time (and will eventually slow down the whole process).
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var angle = 0;
setInterval(function() {
angle++;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.translate(100, 100);
ctx.rotate(angle);
ctx.beginPath();
ctx.rect(0, 0, 30, 30);
ctx.stroke();
ctx.restore();
}, 50);
<canvas width='300' height='300' id='myCanvas'></canvas>

clearRect function doesn't clear the canvas

I'm using this script on the body onmousemove function:
function lineDraw() {
// Get the context and the canvas:
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// Clear the last canvas
context.clearRect(0, 0, canvas.width, canvas.height);
// Draw the line:
context.moveTo(0, 0);
context.lineTo(event.clientX, event.clientY);
context.stroke();
}
It's supposed to clear the canvas each time I move the mouse around, and draw a new line, but it isn't working properly.
I'm trying to solve it without using jQuery, mouse listeners or similar.
Here is a demo: https://jsfiddle.net/0y4wf31k/

You should use "beginPath()". That is it.
function lineDraw() {
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.clearRect(0, 0, context.width,context.height);
context.beginPath();//ADD THIS LINE!<<<<<<<<<<<<<
context.moveTo(0,0);
context.lineTo(event.clientX,event.clientY);
context.stroke();
}

Be advised that ctx.clearRect() does not work properly on Google Chrome. I spent hours trying to solve a related problem, only to find that on Chrome, instead of filling the rectangle with rgba(0, 0, 0, 0), it actually fills the rectangle with rgba(0, 0, 0, 1) instead!
Consequently, in order to have the rectangle filled properly with the required transparent black pixels, you need, on Chrome, to do this instead:
ctx.fillStyle = "rgba(0, 0, 0, 0)";
ctx.fillRect(left, top, width, height);
This should, of course, work on all browsers providing proper support for the HTML5 Canvas object.

And beginPath() and stroke() we need to use.
This code works same as clearRect(...)
ctx.beginPath();
ctx.fillStyle = "rgba(0, 0, 0, 255)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.stroke();

If you're getting a blacked out screen using this method
ctx.beginPath()
ctx.fillStyle = "rgba(0, 0, 0, 255)"
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.stroke();
then switch all the 0's in rgba to 255
ctx.beginPath();
ctx.fillStyle = "rgba(255, 255, 255, 255)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.stroke();

Try with context.canvas.width = context.canvas.width:
function lineDraw() {
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
//context.clearRect(0, 0, context.width,context.height);
context.canvas.width = context.canvas.width;
context.moveTo(0,0);
context.lineTo(event.clientX,event.clientY);
context.stroke();
}
Demo HERE

Skew transformation HTML5 canvas

I'm trying to implement skew transformation using the "x" axis with HTML5 canvas, but my code fails... Here is my JavaScript:
function init() {
var canvas = document.getElementById('skewTest'),
context = canvas.getContext('2d'),
angle = Math.PI / 4;
img = document.createElement('img');
img.src = 'img.gif';
img.onload = function () {
context.setTransform(1, Math.tan(angle), 1, 1, 0, 0);
context.clearRect(0, 0, 200, 200);
context.drawImage(img, 0, 0, 100, 100);
}
}
I'll be very glad if I see working example in JsFiddle.
Thank you in advance!

The correct matrix of skewing in only one direction is
context.setTransform(1, Math.tan(angle), 0, 1, 0, 0);
// ^
With the number at ^ being 1, you are skewing the image in the y-direction by 45° as well.
Sample: http://jsbin.com/etecay/edit#html,live

Canvas can't support direct transform; instead use the below code:
ctx.lineWidth = 100;
ctx.strokeStyle = "rgba(255, 255, 255, 0.5)";
ctx.strokeRect(0, 0, 640, 480);
ctx.lineWidth = 4;
ctx.strokeStyle = "#5E81AB";
ctx.strokeRect(50, 50, 540, 380);

Categories

Resources