This is a simple code to animate a line of text in a canvas but when I use clearRect it still remains on the canvas and doesn't get erased.
Here is the WebApp:
<title>Error Clearing FillText</title>
<script type="text/javascript">
var c, ctx, episode;
var map01 = "Overgrown...", map02 = "Flood Zone...";
function load() {
c = document.getElementById("canvas");
ctx = c.getContext("2d");
episode = document.getElementById("episode");
ctx.clearRect(0, 0, 400, 240);
ctx.drawImage(episode, 10, 5);
ctx.font = "20px san-serif";
ctx.fillStyle = "white";
}
var nameCharCount1 = 0, nameCharCount2 = 0;
function funcMap01() {
ctx.clearRect(0, 0, 400, 240);
ctx.drawImage(episode, 10, 5);
setInterval('loadMap01()', 70);
}
function funcMap02() {
ctx.clearRect(0, 0, 400, 240);
ctx.drawImage(episode, 10, 5);
setInterval('loadMap02()', 70);
}
function loadMap01() {
nameCharCount1++;
var text = map01.substring(0, nameCharCount1);
ctx.setFillStyle = "0";
ctx.fillText(text, 16, 25);
}
function loadMap02() {
nameCharCount2++;
var text = map02.substring(0, nameCharCount2);
ctx.setFillStyle = "0";
ctx.fillText(text, 16, 25);
}
addEventListener("load", load, false);
</script>
</head>
<body>
<canvas id="canvas" width="400" height="240" style="border: 1px solid #000000;">
</canvas>
<br>
<button onclick="funcMap01();">Overgrown...</button>
<button onclick="funcMap02();">Flood Zone...</button>
<h1>I hate arrays..</h1>
</body>
<img id="episode" src="http://i717.photobucket.com/albums/ww176/T3ZTAM3NT/Episode_zps4fa66a1b.png" style="display: none;">
JSFIDDLE.
Do you have any tips/ideas on how should I go about clearing the text?
I made a fiddle for it so check this out:
Working Fiddle
And below is the edited code. All I did is cleared the first functions interval in the second functions call and viceversa.
Script
var c, ctx, episode;
var map01 = "Overgrown...", map02 = "Flood Zone...";
var interval1,interval2;
function load() {
c = document.getElementById("canvas");
ctx = c.getContext("2d");
episode = document.getElementById("episode");
ctx.clearRect(0, 0, 400, 240);
ctx.drawImage(episode, 10, 5);
ctx.font = "20px san-serif";
ctx.fillStyle = "white";
}
var nameCharCount1 = 0, nameCharCount2 = 0;
function funcMap01() {
clearInterval(interval2);
ctx.clearRect(0, 0, 400, 240);
ctx.drawImage(episode, 10, 5);
interval1=setInterval('loadMap01()', 70);
}
function funcMap02() {
clearInterval(interval1);
ctx.clearRect(0, 0, 400, 240);
ctx.drawImage(episode, 10, 5);
interval2=setInterval('loadMap02()', 70);
}
function loadMap01() {
nameCharCount1++;
var text = map01.substring(0, nameCharCount1);
ctx.setFillStyle = "0";
ctx.fillText(text, 16, 25);
}
function loadMap02() {
nameCharCount2++;
var text = map02.substring(0, nameCharCount2);
ctx.setFillStyle = "0";
ctx.fillText(text, 16, 25);
}
addEventListener("load", load, false);
Related
I have created 4 different canvases in design file of my aspx file.
The first 3 having length 300 and last having length 100.
There are various 10 different length inputs coming dynamically for these. Once the length crosses 300, I am unable to switch to 2nd canvas.
Here goes my code:-
<canvas id="canvas1" width="300" height="50"></canvas>
<canvas id="canvas2" width="300" height="50"></canvas>
<canvas id="canvas3" width="300" height="50"></canvas>
<canvas id="canvas4" width="100" height="50"></canvas>
<script type="text/javascript">
var prod1head = '<%=head[0]%>';
var prod2head = '<%=head[1]%>';
var prod3head = '<%=head[2]%>';
var prod4head = '<%=head[3]%>';
var prod5head = '<%=head[4]%>';
var prod6head = '<%=head[5]%>';
var prod7head = '<%=head[6]%>';
var prod8head = '<%=head[7]%>';
var prod9head = '<%=head[8]%>';
var prod10head = '<%=head[9]%>';
var prod1color = '<%=prd_color[0]%>';
var prod2color = '<%=prd_color[1]%>';
var prod3color = '<%=prd_color[2]%>';
var prod4color = '<%=prd_color[3]%>';
var prod5color = '<%=prd_color[4]%>';
var prod6color = '<%=prd_color[5]%>';
var prod7color = '<%=prd_color[6]%>';
var prod8color = '<%=prd_color[7]%>';
var prod9color = '<%=prd_color[8]%>';
var prod10color = '<%=prd_color[9]%>';
var c = document.getElementById("canvas1");
var ctx = c.getContext("2d");
ctx.fillStyle = prod1color;
ctx.fillRect(0, 0, prod1head, 50);
ctx.fillStyle = prod2color;
ctx.fillRect(prod1head, 0, prod2head, 50);
ctx.fillStyle = prod3color;
ctx.fillRect(prod2head, 0, prod3head, 50);
ctx.fillStyle = prod4color;
ctx.fillRect(prod3head, 0, prod4head, 50);
ctx.fillStyle = prod5color;
ctx.fillRect(prod4head, 0, prod5head, 50);
ctx.fillStyle = prod6color;
ctx.fillRect(prod5head, 0, prod6head, 50);
ctx.fillStyle = prod7color;
ctx.fillRect(prod6head, 0, prod7head, 50);
ctx.fillStyle = prod8color;
ctx.fillRect(prod7head, 0, prod8head, 50);
ctx.fillStyle = prod9color;
ctx.fillRect(prod8head, 0, prod9head, 50);
ctx.fillStyle = prod10color;
ctx.fillRect(prod9head, 0, prod10head, 50);
</script>
You could just draw the same shape to all canvas with an offset by the position of the canvas...
In your code you have not really attempted much, you have only one ctx variable, but you have 4 canvases, the first it to loop over all your canvas and add the needed information to an array, that we can later loop and do the drawing.
Instead of the many fillRect you have on your code, we can create a common function that we call with the right params it will draw in all the canvases taking the offset into account, the offset we can calculate using getBoundingClientRect, you can read more about it here:
https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
See a working prototype below:
var canvases = []
for (let i = 1; i < 5; i++) {
const c = document.getElementById("canvas" + i)
canvases.push({
ctx: c.getContext("2d"),
rect: c.getBoundingClientRect()
})
}
function fillRect(color, x, y, w, h) {
canvases.forEach((c) => {
c.ctx.beginPath()
c.ctx.fillStyle = color;
c.ctx.fillRect(x - c.rect.left, y - c.rect.top, w, h)
})
}
function strokeArc(color, x, y, r, lw) {
canvases.forEach((c) => {
c.ctx.beginPath()
c.ctx.lineWidth = lw;
c.ctx.strokeStyle = color;
c.ctx.arc(x - c.rect.left, y - c.rect.top, r, 0, 2 * Math.PI);
c.ctx.stroke();
})
}
fillRect("red", 10, 10, 100, 28)
fillRect("blue", 20, 20, 500, 20)
fillRect("black", 2, 2, 6, 200)
fillRect("black", 300, 2, 6, 200)
strokeArc("cyan", 220, 160, 150, 5)
strokeArc("black", 300, 50, 30, 20)
body {
margin: 0px
}
canvas {
border: 1px solid
}
<canvas id="canvas1" width="300" height="50"></canvas>
<canvas id="canvas2" width="300" height="50"></canvas>
<canvas id="canvas3" width="300" height="50"></canvas>
<canvas id="canvas4" width="100" height="50"></canvas>
That should output something like:
I am trying to implement print function based on the layout I created below.
<html>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<script>
function draw_bordered_rect(context, x, y, w, h) {
var colors = ['grey','red','black','green','orange','purple','yellow'];
context.rect(x, y, w, h);
context.fillStyle = "green";
context.fill();
context.lineWidth = 3;
context.strokeStyle = "lightblue";
context.stroke();
canvasContext.font = '25pt Arial';
canvasContext.textAlign = 'center';
canvasContext.fillStyle = colors[x];
//canvasContext.fillStyle = "black";
canvasContext.fillText('ACTIVITY 1',canvas.width/2-2, 56);
}
window.onload = function() {
canvas = document.getElementById('gameCanvas');
canvasContext = canvas.getContext('2d');
canvasContext.fillStyle = 'white';
canvasContext.fillRect(0, 0, canvas.width, canvas.height);
base_image = new Image();
base_image.src = 'http://jacobian.xyz/draw/pic1.png';
base_image.onload = function(){
canvasContext.drawImage(base_image, 250, 80);
}
bases_image = new Image();
bases_image.src = 'http://jacobian.xyz/draw/e.png';
bases_image.onload = function(){
canvasContext.drawImage(bases_image, 20, 400);
}
bases1_image = new Image();
bases1_image.src = 'http://jacobian.xyz/draw/f.png';
bases1_image.onload = function(){
canvasContext.drawImage(bases1_image, 250, 550);
}
bases2_image = new Image();
bases2_image.src = 'http://jacobian.xyz/draw/g.png';
bases2_image.onload = function(){
canvasContext.drawImage(bases2_image, 450, 545);
}
bases3_image = new Image();
bases3_image.src = 'http://jacobian.xyz/draw/h.png';
bases3_image.onload = function(){
canvasContext.drawImage(bases3_image, 350, 545);
}
draw_bordered_rect(canvasContext, 0, 0, 790, 70);
draw_bordered_rect(canvasContext, 0, 540, 790, 70);
canvasContext.fillStyle = 'grey';
canvasContext.fillRect(20, 150, 40, 40);
canvasContext.fillStyle = 'orange';
canvasContext.fillRect(20, 200, 40, 40);
canvasContext.fillStyle = 'purple';
canvasContext.fillRect(20, 250, 40, 40);
canvasContext.fillStyle = 'magenta';
canvasContext.fillRect(20, 300, 40, 40);
canvasContext.fillStyle = 'red';
canvasContext.fillRect(70, 150, 40, 40);
canvasContext.fillStyle = 'green';
canvasContext.fillRect(70, 200, 40, 40);
canvasContext.fillStyle = 'blue';
canvasContext.fillRect(70, 250, 40, 40);
canvasContext.fillStyle = 'yellow';
canvasContext.fillRect(70, 250, 40, 40);
canvasContext.fillStyle = 'black';
canvasContext.fillRect(70, 300, 40, 40);
}
</script>
</html>
so that when they click on the print button in the picture then the print dialog would come up.
I think the print function is like this.
function printPage()
{
window.print();
}
any help would be appreciated though.
Just make the buttons not part of the canvas. Have them part of normal html <a> or <button> tags that you styled.
Then add the the print function to an onclick event on those buttons/links.
That way you can also hide them in your CSS from printing. So they won't show up on the printed end result.
When I click start, I get whole circle. But when I click clean and again start, previously part of the circle remaining and straight line appear.
DEMO: https://fiddle.jshell.net/1xhkfk73/
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var draw = 0;
var stepDraw = 0;
ctx.strokeStyle = "#FF0000";
ctx.translate(0.5, 0.5);
var delay = 30;
var drawing = 0;
function drawCircle(steps) {
draw = ((2 * Math.PI) / steps);
stepDraw = draw;
drawing = setInterval(function() {
ctx.arc(400, 200, 120, draw, draw, false);
ctx.stroke();
draw += stepDraw;
}, delay)
}
$("#click").click(function() {
drawCircle(120);
});
$("#clean").click(function() {
clearInterval(drawing);
ctx.clearRect(0, 0, 800, 400);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="click">start</span>
<span id="clean">clean</span>
<canvas id="myCanvas" class="center-block" width="800" height="400">
Canvas not supported!
</canvas>
Try this.
You need to have your path closed.
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var draw = 0;
var stepDraw = 0;
ctx.strokeStyle = "#FF0000";
ctx.translate(0.5, 0.5);
var delay = 30;
var drawing = 0;
function drawCircle(steps) {
draw = ((2 * Math.PI) / steps);
stepDraw = draw;
drawing = setInterval(function() {
ctx.beginPath();
ctx.arc(400, 200, 120, draw, draw+stepDraw, false);
ctx.stroke();
draw += stepDraw;
}, delay)
}
$("#click").click(function() {
drawCircle(120);
});
$("#clean").click(function() {
clearInterval(drawing);
ctx.clearRect(0, 0, 800, 400);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="click">start</span>
<span id="clean">clean</span>
<canvas id="myCanvas" class="center-block" width="800" height="400">
Canvas not supported!
</canvas>
How can I place a blue box between red and green one using this function?
I need to achieve this effect.
Here's a Codepen.
HTML
<canvas id="canvas">
</canvas>
JS
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
window.onload = draw;
green = new Image;
green.src = 'http://www.thebouncingbox.com/images/thumbnail/produkte/large/California-Sunbounce-meterware-green-box.jpg';
red = new Image;
red.src = 'http://www.front-porch-ideas-and-more.com/image-files/color-red.jpg';
blue = new Image;
blue.src = 'http://s3.amazonaws.com/colorcombos-images/colors/000066.png';
function draw() {
ctx.drawImage(green, 0, 0, 200, 200);
ctx.drawImage(red, 80, 50, 120, 100);
ctx.drawImage(blue, 60, 30, 100, 100);
}
You need to listen onload event of the image before drawing it. To have images over image, series operation will help!
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
window.onload = draw1;
function draw1() {
var green = new Image();
green.onload = function() {
ctx.drawImage(green, 0, 0, 200, 200);
draw2();
};
green.src = 'http://www.thebouncingbox.com/images/thumbnail/produkte/large/California-Sunbounce-meterware-green-box.jpg';
}
function draw2() {
var blue = new Image;
blue.onload = function() {
ctx.drawImage(blue, 50, 50, 100, 100);
draw3();
};
blue.src = 'http://s3.amazonaws.com/colorcombos-images/colors/000066.png';
}
function draw3() {
var red = new Image();
red.onload = function() {
ctx.drawImage(red, 100, 100, 100, 100);
};
red.src = 'http://www.front-porch-ideas-and-more.com/image-files/color-red.jpg';
}
<canvas id="canvas" width="200" height="200"></canvas>
Why not change the order you draw them?
function draw() {
ctx.drawImage(green, 0, 0, 200, 200);
ctx.drawImage(blue, 60, 30, 100, 100);
ctx.drawImage(red, 80, 50, 120, 100);
}
I have two images, green and black. I want to alternate those images in a certain frequency.
My code:
<script>
var wis=1;
var delay=500;
wissel()
function wissel() {
if (wis==1)
{wis=2; green();}
else {wis=1; black();}
delay=delay+500;
setTimeout (wissel(), delay)
}
function green() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(438,398,125,0,2*Math.PI);
ctx.arc(838,398,125,0,2*Math.PI);
ctx.fillStyle="#00ff00";
ctx.fill();
}
function black() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(438,398,128,0,2*Math.PI);
ctx.arc(838,398,128,0,2*Math.PI);
ctx.fillStyle="#000000";
ctx.fill();
}
</script>
When I insert an alert(wis) behind the delay=delay+500; line it works. But of course I do not want to click. I want it automatically. I can use some help here.
You have mistake in your setTimeout call. Remove the parentheses:
DEMO
var wis = 1;
var delay = 500;
wissel()
function wissel() {
if (wis == 1) {
wis = 2;
green();
} else {
wis = 1;
black();
}
delay = delay + 500;
setTimeout(wissel, delay)
}
function green() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(438, 398, 125, 0, 2 * Math.PI);
ctx.arc(838, 398, 125, 0, 2 * Math.PI);
ctx.fillStyle = "#00ff00";
ctx.fill();
}
function black() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(438, 398, 128, 0, 2 * Math.PI);
ctx.arc(838, 398, 128, 0, 2 * Math.PI);
ctx.fillStyle = "#000000";
ctx.fill();
}