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);
Related
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.
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.
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/
I am trying to draw a line on a canvas after a timeout period. One of the "lineTo" parameters is being sent a value from a variable that is being declared in another script and is being passed as a window.var....
I have a console log set up to execute at the same time as the variable is accessed in the canvas script as well.
onLoad, everything executes as it should. After the timeout, the console shows that the variable has a value, but the canvas line is not drawn.
At first I had no timeout inserted and the variable kept coming back as undefined. I opted to go with a timeout, as I don't fully understand callbacks yet.
Any advice would be greatly appreciated!
<script>
window.setTimeout(render,8500);
function render(){
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var end = window.testVar;
context.beginPath();
context.moveTo(4, 28);
context.lineTo(end, 28);
context.lineWidth = 10;
context.stroke();
console.log(end);
}
</script>
context.lineTo expects a number, so cast your testVar to a number
For example:
var end = parseInt(window.testVar);
Your code above works fine for me...the line draws itself after the specified delay:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
window.testVar=23;
window.setTimeout(render,2000);
function render(){
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var end = window.testVar;
context.beginPath();
context.moveTo(4, 28);
context.lineTo(end, 28);
context.lineWidth = 10;
context.stroke();
console.log(end);
}
body{ background-color: ivory; }
canvas{border:1px solid red;}
<canvas id="canvas" width=300 height=300></canvas>
User error....
I'm using WYSIWYG Web Builder, and I'm using layers. Some how, the canvas element was marked as "visibility: hidden";
Since the background of the canvas is transparent, I didn't catch it.
To all, thanks for commenting.
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.