HTML Canvas not displaying my rectangles - javascript

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script>
window.onload = function(){
var canvas = document.getElementById("map"),
c = canvas.getContext("2d");
c.fillStyle = "black";
c.fillRect(0, 0, canvas.width, canvas.height);
c.fillStyle = "red";
c.fillRect = (20, 30, 50, 250);
c.fillSyle = "white";
c.fillRect = (50,50,25,25);
};
</script>
</head>
<body>
<canvas id="map" width="800" height="400">
<img src="images/sad dinosaur.jpg" />
You will need an updated browser to view this page!
</canvas>
</body>
</html>
I am just tinkering a bit with canvas trying to get a feel for how it works. However, the tutorial video I am watching shows the coding for the c.fillRect and the c.fillStyle in the exact same format that i have shown in my code yet my screen only displays the black rectangle from the first set of instructions.

The syntax for fillRect is c.fillRect(...), as opposed to c.fillRect = (...). Compare your last two calls with your first call.
Also, your last fillStyle is mistyped as fillSyle.
window.onload = function () {
var canvas = document.getElementById("map"),
c = canvas.getContext("2d");
c.fillStyle = "black";
c.fillRect(0, 0, canvas.width, canvas.height);
c.fillStyle = "red";
c.fillRect(20, 30, 50, 250);
c.fillStyle = "white";
c.fillRect(50, 50, 25, 25);
};
WORKING EXAMPLE

Related

For html canvas, how to use clip() with a text as a path?

I wrote the following code which is similar to my objective but falls short; because I want to fill inside the text in multiple colors; currently only in #FF00FF.
Playground
I think the problem is that I don't know how to use the text "ABC" as the clipping path. Please show me how to do it, or any answer equivalent for my objective.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas</title>
<script type="text/javascript">
function test() {
var canvas = document.getElementById('sample');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
for(let i=1;i<100;i++){
//mock1: ctx.fillStyle = "rgb(" + [i, i, i] + ")";
ctx.moveTo(0,5*i);
ctx.lineTo(380,5*i);
ctx.lineTo(300,5*i+3);
ctx.lineTo(0,5*i+3);
ctx.lineTo(0,5*i);
}
ctx.closePath();
ctx.clip();
ctx.font = "bold 72px 'Sans-selif'";
ctx.fillStyle = "#FF00FF";
ctx.fillText("ABC", 90, 60);
}
}
</script>
</head>
<body onLoad="test()">
<h2>Canvas</h2>
<canvas width="300" height="150" id="sample" style="background-color:yellow;">
</canvas>
</body>
</html>
The 2DCanvas API unfortunately doesn't expose the text's contour in a way it could be used as a Path2D or in methods like clip() or isPointInPath().
However for what you wish to do, you don't need a path, this can be done by using compositing instead of clipping:
var canvas = document.getElementById('sample');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// draw the full lines first
ctx.beginPath();
for (let i = 1; i < 100; i++) {
ctx.moveTo(0, 5 * i);
ctx.lineTo(380, 5 * i);
ctx.lineTo(300, 5 * i + 3);
ctx.lineTo(0, 5 * i + 3);
ctx.lineTo(0, 5 * i);
}
ctx.fillStyle = "#00FF00";
ctx.fill();
// with this mode
// every previous pixel that is not under the next drawing
// will get cleared
ctx.globalCompositeOperation = "destination-atop"
ctx.font = "bold 72px 'Sans-serif'";
ctx.fillStyle = "#FF00FF";
ctx.fillText("ABC", 90, 60);
// reset to default mode
ctx.globalCompositeOperation = "source-over"
}
<canvas width="300" height="150" id="sample" style="background-color:yellow;"></canvas>

javascript canvas webpage not displaying

I am trying to make a canvas with a black square and a moving white circle but it is not working and i dont know why here is the issue it is just an empty webpage when i try to open it. I have saved and evreything. i really need help! here is the code
<html>
<head>
<title>paddle</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script>
var canvas
var canvasContext
var ballX = 5
window.onload = function() {
var fps = 30;
setInterval(updateAll, 1000)
canvas = document.getElementById("myCanvas");
canvasContext = canvas.getContext("2d")
}
function updateAll() {
ballX++
canvasContext.fillStyle = "black"
canvasContext.fillRect(0, 0, canvas.width, canvas.height)
canvasContext.fillStyle = "white";
canvasContext.beginPath()
canvasContext.arc(ballX, 100, 10, 0, Math.PI*2 true);
}
</script>
</body>
</html>
You're missing a comma before the last argument here (between Math.PI*2 and true):
canvasContext.arc(ballX, 100, 10, 0, Math.PI*2 true);

Avoiding Javascript Memory Leaks from the Creation of Canvas

I have some HTML and Javascript code that draws a 2D canvas in the page. In the task manager, I can see memory increasing rapidly until the web page freezes.
Please let me know how I can prevent memory leaks or provide me with some alternative code that is able to draw canvas on the browser without creating such leaks.
function setup() {
// insert setup code here
}
function draw() {
// insert drawing code here
var canvas = document.createElement('canvas');
canvas.id = "CursorLayer";
canvas.width = 1224;
canvas.height = 600;
canvas.style.zIndex = 8;
canvas.style.position = "absolute";
canvas.style.border = "1px solid";
document.body.appendChild(canvas);
var c2 = canvas.getContext('2d');
var centerX=canvas.width/2-100;
var centerY=canvas.height/2-100;
c2.fillStyle = '#696969';
c2.beginPath();
c2.moveTo(centerX, centerY);
c2.lineTo(centerX+200,centerY);
c2.lineTo(centerX+200, centerY+200);
c2.lineTo(centerX, centerY+200);
c2.closePath();
c2.fill();
// adding source location
var ctx = canvas.getContext("2d");
ctx.fillStyle = '#008000';
ctx.beginPath();
ctx.arc( 20, canvas.height-20, 10, 0, 2 * Math.PI);
ctx.stroke();
ctx.closePath();
ctx.fill();
// adding destination location
var ctx1 = canvas.getContext("2d");
ctx1.fillStyle = '#f00';
ctx1.beginPath();
ctx1.arc( canvas.width-20, 20, 10, 0, 2 * Math.PI);
ctx1.stroke();
ctx1.closePath();
ctx1.fill();
}
<!DOCTYPE html>
<html>
<head>
<title>Robot Path Planning</title>
<style>
body {
padding: 0;
margin: 0;
}
</style>
<script src="../p5.min.js"></script>
<script src="../addons/p5.dom.min.js"></script>
<script src="../addons/p5.sound.min.js"></script>
<script src="sketch.js"></script>
</head>
<body>
</body>
</html>
Browser
Memory consumption
Apparently your code is creating a new canvas entity for each draw call and this doesn't make sense.
You should instead create the canvas only once and then just do drawing on it in the draw call. If you need to clear the previous frame you can just reset the width/height properties or call clearRect.

triangle animation issue canvas flip rotation

Hello I wanted to know if anyone can provide tips or direction on an issue i'm having with a triangle animation. I have a partial animation that is not continuous, it jitters at the end of the animation. I'm looking for advise how to make a full rotation. If anyone can also assist in how to add multiple rotations that would be amazing.
Thank you ..
<!DOCTYPE html>
<html>
<head>
<title>Triangle Animation Team B</title>
</head>
<body>
<canvas id="canvas" width="900" height="600"></canvas>
<script>
function makeTriangle(x1,y1,x2,y2,x3,y3) {
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
var Array = ['red','green', 'black'];
var color = Array[Math.floor(Math.random() * 3)];
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.lineTo(x3,y3);
ctx.lineTo(x1,y1);
ctx.fillStyle = color;
ctx.fill();
}
}
makeTriangle('400','38','465','76','200','400');
var x = 200;
window.setInterval( function() {
var context = document.getElementById('canvas').getContext('2d');
context.clearRect(0, 0, 1000, 500, 0);
x++;
if (x > 500) x = 300;
makeTriangle('400','38',x,'76','400','200');
}, 20);
</script>
</body>
</html>

ArcTo() not drawing arc

I've got the following HTML file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Canvas Hello World</title>
<link href="default.css" rel="stylesheet" />
<script src="jquery-2.0.0.min.js"></script>
</head>
<body>
<h1>ArcTo</h1>
<h2>Two arcs</h2>
<canvas id="arcToNormalCanvas" width="500" height="500">HTML5 not supported
</canvas>
<hr />
<h1>Simple drawing:</h1>
<canvas id="rectangleCanvas" width="500" height="500">HTML5 not supported
</canvas>
<hr />
<script>
$(document).ready(function () {
doRectangleCanvas();
drawTwoArcs();
});
function doRectangleCanvas() {
var canvas = $('#rectangleCanvas')[0],
ctx = canvas.getContext('2d');
ctx.fillRect(50, 100, 150, 200);
ctx.stroke();
}
function drawTwoArcs() {
var canvas = $('#arcToNormalCanvas')[0],
ctx = canvas.getContext('2d');
ctx.strokeStyle = 'blue';
ctx.lineWidth = 5;
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 200);
ctx.moveTo(300, 200);
ctx.lineTo(400, 100);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = 'green';
ctx.moveTo(200, 200);
ctx.arcTo(200, 200, 300, 200, 100);
ctx.stroke();
}
</script>
</body>
</html>
However, the output is only the lines, with no arc!
Any ideas?
arcTo is only supported by Firefox and Safari. For full browser support, you should use arc:
ctx.beginPath();
ctx.arc(250,200,50,Math.PI,Math.PI*2,true);
ctx.strokeStyle = "green";
ctx.stroke();
Also, I have to ask, why on earth are you using $('#rectangleCanvas')[0] when you should be using document.getElementById('rectangleCanvas')?
If you want to connect the two lines, which is what I think you want, I have to change this lines...
//...
ctx.moveTo(200, 200);
ctx.arcTo(250, 250, 300, 200, 50);
// A radius of 100 is not what you want I believe.
// I used 50 for this example.
// You might want Math.cos(Math.Pi / 4) * 100, which is around 70.7
// You might also want to add here a line to actually connect with (300, 200). As if you use a too short or too long radius your arc will not be connected.
ctx.lineTo(300, 200);
ctx.stroke();
... As this function will define an arc between the two tangents not from point to point.
BTW, arcTo function is well supported in all major browsers that support the canvas element.

Categories