Why context stroke redraws the old drawing on canvas - javascript

Having the following example where on a canvas are drew two different lines when pressing two buttons, how can I make the second button clear the old line and draw another?
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<button onclick="draw()">first</button>
<button onclick="draw2()">second</button>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle = "red";
function draw(){
ctx.moveTo(0,0);
ctx.lineTo(100,200);
ctx.stroke();
}
function draw2(){
ctx.clearRect(0, 0, c.width, c.height);
ctx.moveTo(100,0);
ctx.lineTo(0,200);
ctx.stroke();
}
</script>
I am using clearRect function, to clear the canvas, but when stroke is called on the second drawing, the first one is redrawn.

You have to call .beginPath() to clear out the current path and start a new one. In your case, it looks like you can do that at the beginning of each of your two functions.

Related

Cutting tilted lines canvas/Javascript?

I've watched a bunch of tutorials and am currently trying to cut the top right piece out, but can only cut in a straight line. Not I'm stuck wondering how I would go by to cut remaining tilted line on this piece. How would I go by doing that?
This is the line I'm talking about: http://imgur.com/GgxPcb0
The fiddle: http://jsfiddle.net/8b1a64pm/2/
<body>
<canvas id="NewCanvas" height="800" width="800">
</canvas>
</body>
And the javascript
var can=document.getElementById("NewCanvas");
var Jctx=can.getContext("2d");
var img = new Image();
img.onload = function() {
Jctx.drawImage(img,150,10);
//drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);
Jctx.drawImage(img,150, 45, 150, 100, 100, 300, 150, 100);
}
img.src='http://images.sodahead.com/polls/004087283/3238285773_0912_holiday_pie_slicespreview_answer_103_xlarge.jpeg';
Use the clip method on the new canvas to cut out only part of the original.
Eg
// ctx is the new canvas
ctx.save(); // save the current state
ctx.moveTo(0,0);
ctx.lineTo(150,0);
ctx.lineTo(75,150);
ctx.closePath();
ctx.clip();
ctx.drawImage(img,0,0); // new image is clipped
ctx.restore(); // revert to old state and removes the clip.

how to add text area on canvas using jquery javascript

I have a textarea and canvas. The user is able to drag image onto the canvas and change different background images. Now I need to be able to have a section at the bottom of canvas that will display text from textarea.
<canvas id="canvas" width="640" height="280"></canvas>
<div id="text">
<textarea id="write_whatever">Write 4 lines to describe yourself.</textarea>
<div id="button_to_add"></div>
</div>
Here's the jsfiddle of what i currently have http://jsfiddle.net/D4zw4/50/
Here's what I am trying to achieve, but instead of key up it's with button click and it should be at the bottom of the canvas http://jsfiddle.net/m1erickson/NuaHp/
Anyone know how I could achieve this or done this before? Thanks in advance :)
Something like this?
$('#button_to_add').on('click', 'button', function () {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var text = $('#write_whatever').val();
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#3e3e3e";
ctx.font = "16px Arial";
ctx.fillText(text, 20, canvas.height - 20);
});
http://jsfiddle.net/D4zw4/51/

can we adjust the transparency of drawn line on when mouse move on it?

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();
}

How can I fill canvas shape with animation?

I'm new to canvas. I have a drop canvas shape and want to fill it as animation.
HTML
<canvas id="canvas" width="500" height="500"></canvas>
JS
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d");
context.beginPath();
context.moveTo(109,15);
context.bezierCurveTo(121,36,133,57,144,78);
context.bezierCurveTo(160,109,176,141,188,175);
context.bezierCurveTo(206,226,174,272,133,284);
context.bezierCurveTo(79,300,24,259,25,202);
context.bezierCurveTo(25,188,30,174,35,161);
context.bezierCurveTo(53,115,76,73,100,31);
context.bezierCurveTo(103,26,106,21,109,15);
context.lineWidth = 10;
context.strokeStyle="#0092f9";
context.stroke();
context.fillStyle="rgb(43,146,255)";
context.beginPath();
context.moveTo(181,229);
context.bezierCurveTo(179,232,178,235,176,238);
context.bezierCurveTo(171,247,165,254,158,260);
context.bezierCurveTo(150,266,141,269,132,272);
context.bezierCurveTo(126,274,119,275,112,275);
context.bezierCurveTo(108,276,104,275,100,275);
context.bezierCurveTo(92,274,84,272,76,269);
context.bezierCurveTo(67,265,60,259,53,251);
context.bezierCurveTo(48,245,43,238,39,231);
context.bezierCurveTo(39,230,38,230,39,229);
context.bezierCurveTo(39,228,40,229,40,229);
context.bezierCurveTo(52,230,63,231,75,230);
context.bezierCurveTo(79,229,84,228,89,228);
context.bezierCurveTo(97,227,104,227,112,229);
context.bezierCurveTo(116,230,120,230,124,230);
context.bezierCurveTo(130,231,137,231,143,231);
context.bezierCurveTo(148,231,153,230,158,230);
context.bezierCurveTo(165,229,173,228,181,229);
context.fill();
Drop shape start point as;
and shape end point as;
I want to fill it with animation, increase liquid slowly as in jquery animate function. How can I do this?
Code example
You can use context.clip to restrict your liquid to drawing only in the container.
Here is example code and a Demo: http://jsfiddle.net/m1erickson/jM4hW/
// draw the container
ctx.beginPath();
ctx.moveTo(109,15);
ctx.bezierCurveTo(121,36,133,57,144,78);
ctx.bezierCurveTo(160,109,176,141,188,175);
ctx.bezierCurveTo(206,226,174,272,133,284);
ctx.bezierCurveTo(79,300,24,259,25,202);
ctx.bezierCurveTo(25,188,30,174,35,161);
ctx.bezierCurveTo(53,115,76,73,100,31);
ctx.bezierCurveTo(103,26,106,21,109,15);
ctx.lineWidth=linewidth;
ctx.strokeStyle=strokestyle;
ctx.stroke();
// make the container a clipping region
// all subsequent drawings will only appear inside the container
ctx.clip();
// now draw the liquid
// the liquid will be drawn only where
// it is inside the clipping region (the container)
ctx.fillRect(0,150,canvas.width,500);

How to fix text overlapping with setInterval and fillStyle?

I am very new to JavaScript and have very little knowledge about why certain symbols/characters act the why they do. So if you don't mind explaining a bit how the fix helped my code that would be a huge boost in my understanding. Thanks!
<canvas id="myCanvas" width="600" height="400"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var interval = setInterval(function()
{
var time= new Date()
ctx.font="30px Verdana";
// Create gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","green");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","green");
// Fill with gradient
ctx.fillStyle=gradient;
ctx.fillText(time,10,90);
},10)
</script>
You need to clear the canvas prior to drawing the text. Add the following code to the beginning of your setInterval function:
ctx.clearRect(0, 0, c.width, c.height);

Categories

Resources