Why don't my rectangles show up? - javascript

A simple problem to most of you however I have an issue with my HTML or JavaScript. I am trying to make some rectangles appear when running the code. I am met with the all to familiar blank screen.
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/myCanvas.css"/>
<script type="text/javascript" src="../js/rectangles.js">
</script>
<meta charset="UTF-8">
<title>Canvas Example</title>
</head>
<body>
<canvas id="lessonCanvas" width="300" height="300" style="margin:100px;">
<p>This example requires a browser that supports the HTML5 canvas feature.</p>
</canvas>
</body>
</html>
And the JavaScript:
function setupCanvas() {
var canvas = document.getElementById('lessonCanvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.strokeRect(0, 0, 200, 200);
ctx.strokeStyle = 'rgb(255, 0, 0)';
ctx.strokeRect (0.5, 0.5, 100, 100);
ctx.fillRect (20, 20, 100, 100);
ctx.fillStyle = 'rgb(0, 255, 0)'
ctx.fillRect (50, 50, 100, 100);
ctx.clearRect (80, 80, 30, 30);
}
}
Any help for a clueless would be appreciated

You have to actually call setupCanvas
Here's a codepen showing this. As you can see, I just added one line to your code. I hope this is the result you intended

Related

java script canvas pixel discrepancy

What is the trick with canvas scale discrepancy? I used canvas scale model for example 10 px by 10 px, draw it, but actually when I checked it (counting exactly amount of pix in the row) - its more then 10 px, its about 15px !!!
Here is the code html:
<div id="canvasDiv">
<canvas id="canvasSignature" width="10px" height="10px" ></canvas>
</div>
For JS:
var c = document.getElementById("canvasSignature");
var ctx = c.getContext("2d");
ctx.fillStyle = '#FD0';
ctx.fillRect(0, 0, 10, 10);
Do I need to adjust some scale (calibrating) for browser or something else ?
Full code:
<!DOCTYPE html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="canvas.css">
</head>
<body>
<h1>Canvas 100px * 100px</h1>
<div id="canvasDiv">
<canvas id="canvasSignature" ></canvas>
</div>
<input type="button" value = "Draw" onclick=ClearCanv();>
<br>
<script type="text/javascript">
function ClearCanv(){
var c = document.getElementById("canvasSignature");
var ctx = c.getContext("2d");
//context.clearRect(0, 0, canvas.width, canvas.height);
//ctx.clearRect(0, 0, c.width, c.height);
//ctx.fillRect(10,10,50,50);
//ctx.beginPath();
ctx.fillStyle = '#FD0';
ctx.fillRect(0, 0, 10, 10);
}
</script>
</body>
</html>
Here is CSS:
#canvasDiv {
width: 10px;
height: 10px;
}
I tried solution for Canvas is stretched when using CSS but normal with "width" / "height" properties
It doesn't help!
JSFiddle:
https://jsfiddle.net/neL81ce5/3/

Moving image relatively to cursor JS

I am doing this small project - my cursor moves in a left rectangle and it should appear in the second one. I have made an image of cursor and I am trying to move it according to my cursor, but nothing happens. Could you help me to find the mistake? I would be very grateful!
Here is the code snippet:
<html>
<head>
<title>Laboratory work 1_4</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#imgc{
position: absolute;
}
</style>
</head>
<body>
<img src="arrow.png" id="imgc" width="20" height="20">
<canvas id="canvas" width="800" height="600" ></canvas>
<script type="text/javascript">
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.rect(20, 20, 300, 200);
ctx.stroke();
ctx.rect(350, 20, 300, 200);
ctx.stroke();
</script>
<script type="text/javascript" src="js/libs/jquery/jquery.js">
$("#canvas").mousemove(function(e){
$("#imgc").stop().animate({left:e.pageX, top:e.pageY});
});
</script>
</body>
P.S. I added jquery library in a JavaScript libraries wizard in Netbeans. So the structure of my project looks like this:

Javascript: My canvas is drawing nothing

i am making a basic game loop so i started with the basic cube exercise and i wrote the exemple below but it isn't working. i tried to see if there is something misspell but i could find nothing aparently.
<!DOCTYPE HTML>
<html>
<head>
<title>Game</title>
<style type="text/css">
#GameCanvas {
background-color: #FF0000;
}
</style>
</head>
<body>
<canvas id="GameCanvas" width="1000" height="600"></canvas>
<script type="text/javascript">
var canvas = document.findElementById("GameCanvas");
var graphics = canvas.getContext("2d");
function Update() {}
function Draw() {
graphics.beginPath();
graphics.fillRect(20, 20, 50, 50);
graphics.fillStyle = "#FFFFFF";
graphics.fill();
graphics.closePath();
}
function GameLoop() {
Update();
Draw();
requestAnimFrame(GameLoop);
}
requestAnimFrame(GameLoop);
</script>
</body>
</html>
You have a couple bugs here, document.findElementById does not exist, change it to document.getElementById.
requestAnimFrame should be changed to requestAnimationFrame in both instances.
With these changes your loop runs and draws a square to the screen.
<!DOCTYPE HTML>
<html>
<head>
<title>Game</title>
<style type="text/css">
#GameCanvas {
background-color: #FF0000;
}
</style>
</head>
<body>
<canvas id="GameCanvas" width="1000" height="600"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("GameCanvas");
var graphics = canvas.getContext("2d");
function Update() {}
function Draw() {
graphics.beginPath();
graphics.fillRect(20, 20, 50, 50);
graphics.fillStyle = "#FFFFFF";
graphics.fill();
graphics.closePath();
}
function GameLoop() {
Update();
Draw();
requestAnimationFrame(GameLoop);
}
requestAnimationFrame(GameLoop);
</script>
</body>
</html>

HTML canvas making blurry shapes

I want to make simple shapes using HTML.
But the shapes need to be big.
And the canvas is in full screen
Example: http://jsfiddle.net/xLgg43s9/1/embedded/result/
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
* { margin: 0; padding: 0;}
body, html { height:100%; }
#canvas {
position:absolute;
width:100%;
height:100%;
}
</style>
</head>
<body>
<canvas id="canvas">
</canvas>
<script>
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.fillStyle = "#000";
var w=canvas.width;
var h=canvas.height;
ctx.fillRect(0,0,w,h);
ctx.fillStyle="#fff";
ctx.beginPath();
var a=w/2;
var b=0;
ctx.arc(a,b,20,0,Math.PI,false);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.fillStyle="red";
ctx.fillRect(0,0,10,100);
ctx.stroke();
ctx.save();
ctx.translate(240, 120);
ctx.rotate(Math.PI / 4); // 45 degrees
ctx.fillStyle = "yellow";
ctx.fillRect(-40, -40, 20, 20);
ctx.restore();
</script>
</body>
</html>
Please fix it.
Don't set the canvas's size through CSS, that stretches the canvas element, instead of actually making the canvas larger.
Use HTML attributes, instead:
<canvas id="canvas" width="500" height="500"></canvas>
Now, since you want to set the canvas to 100% width / height, those pre-set attributes aren't going to do the trick for you, you're going to have to use some JS:
var canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx=canvas.getContext("2d");
// etc...
If you want to have the canvas resize when the window gets resized, I'd suggest you look at this answer.

html 5 function not executed?

I am working through a book called "Beginning Facebook Game Apps Dev" and in Chapter 3 they introduce us to create code for html document.
I'm on a Mac and I use TextEdit to create the pages. At first the book gave code to draw a rectangle and a triangle. Both were fine but then I try the code rotation, it only displays the box.
I have been programming for some time now with c++ without being an expert but I know absolutely nothing yet on how the internet works. Anyway the only difference I can see between the code that works and the one that doesn't is the fact to rotate I call functions where for the rectangle I dont. Could anyone tell me what is going on please?
ps: I tried to google html 5 function not working but honestly I'm at a loss for words on how to search for this specific problem.
thank you
code working (draw rectangle)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>A simple Canvas Square</title>
<style type="text/css" media="screen">
#canvas
{
border: 1px solid #c0c0c0;
}
</style>
</head>
<body>
<canvas id="canvas" width="270" height="270"></canvas>
<script type="text/javascript" charset="utf-8">
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.fillStyle = "gray";
context.fillRect(30, 30, 200, 200);
</script>
</body>
</html>
code not working (rotation)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>overlapping box</title>
<style type="text/css" media="screen">
#canvas
{
border: 1px solid #c0c0c0;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="400"></canvas>
<script type="text/javascript" charset="utf-8">
function draw(canvas Id)
{
"use strict";
var canvas = document.getElementById(canvasId);
var context = canvas.getContext("2d");
context.fillStyle = "#091F5D";
context.fillRect(10, 10, 160, 150);
context.fillStyle = "rgba(255, 78, 0, 0.5)";
context.fillRect(90, 90, 160, 150);
context.fillStyle = "rgb(255, 78, 0)";
context.fillRect(170, 160, 160, 150);
}
draw('canvas');
</script>
</body>
</html>
in this line:
function draw(canvas Id)
you should not have a space between the words 'canvas' and 'Id'. Change it to:
function draw(canvasId)
canvasId is the name of the parameter (with the value passed being the id of the canvas element in which you want to draw the rectangles).

Categories