Why can't I draw a rectangle in my HTML5 canvas? - javascript

I am trying to draw a red rectangle on my HTML5 canvas. Here is my HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>My Canvas Experiment</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<script src="plotting.js"></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<canvas id="plot"></canvas>
</body>
</html>
Here is plotting.js:
document.onload = function() {
var c = document.getElementById("plot");
var ctx = c.getContext("2d");
ctx.fillStyle("#f00");
ctx.fillRect(0, 0, 175, 40);
}
Here is main.css:
body { margin:100px; }
article, aside, figure, footer, header, hgroup, menu, nav, section {
display:block;
}
#plot {
width: 500px;
height: 400px;
}
Why is the page blank? Chrome Web Developer Console issues no errors.

Replace:
ctx.fillStyle("#f00");
with:
ctx.fillStyle="#f00";

Use window.onload instead of document.onload, (keeping #stewe's suggestion).
DEMO

Replacectx.fillStyle('#f00'); to ctx.fillStyle = 'red'; because fillStyle is a variable and NOT the function.

I've been having issues all morning with javascript not drawing my shapes. Turns out you HAVE to set the width and height on the canvas tag in HTML, and not through the CSS, or the shapes will not draw.
example:
<canvas id="map" width="500" height="500"></canvas>

Related

Using canvas to take a picture of an image element

I wanted to take a picture of a photo I have on my webpage using a canvas to get a local url for it. Obviously, this is redundant because I already have the url for the photo, but it would be useful in other contexts (like videos). When I execute this code, a white box appears that is not the image I use for testing purpose. Where am I going wrong here?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="main.js" defer></script>
</head>
<style>
img{
height: 500px;
width: 500px;
}
</style>
<body>
<img id="test" src="img_url">
<button onclick="takePhoto()">Click Me</button>
</body>
</html>
JS:
var width=200
var height=300
function takePhoto(){
var test = document.getElementById("test")
var canvas = document.createElement("canvas")
document.body.appendChild(canvas)
var cxt = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
cxt.drawImage(test, width, height);
var data = canvas.toDataURL('image/png');
console.log(data)
}
The 3 params version of drawImage() is
drawImage(source, x, y);
You did set the x and y params to the width and height of the canvas, which means the browser will draw the image from the bottom right corner of the canvas, which obviously doesn't do much.
You probably wanted the 5 params version
drawImage(source, x, y, resizeWidth, resizeHeight);
Where you'd set x and y to 0.

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:

screen resolution geeksphone peak

in specification of FFOS GP PEAK is written, that it's got qHD display (it is 960*540), but when I run JavaScript code:
console.log(screen.width)
console.log(screen.height)
I get 640*360. Is it JavaScript bug? Or anything else?
Thank you.
I believe the Peak has a device pixel ratio of 1.5, which would be 640x360 logical pixels.
You may want to have a look at css - what exactly is device pixel ratio
and Bug 838505
If I use the following HTML and JS this draws a square around the entire screen.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--<meta name = "viewport" content="user-scalable = no"> -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="css/background.css">
<title>Test</title>
<script type="text/javascript" src="js/loop.js"></script>
<style type="text/css">
*
{
border: 0px;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body><canvas id="myCanvas"></canvas></body>
</html>
loop.js
//Main file for game logic
window.onload = init;
//Setup function to reset start location
function setup() {
canvas = document.getElementById('myCanvas');
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
context = canvas.getContext('2d');
context.beginPath();
context.lineWidth="6";
context.strokeStyle="red";
context.rect(0,0,canvas.width,canvas.height);
context.stroke();
}
//Initialize game and event handlers
function init() {
setup();
}

Canvas cannot perform fill if size is too big

After I set the canvas in HTML for a certain size, for example, 800x600, the script will not fill for me, but if I set it to be 150x150, it will. Why is it happening? Can it be fixed? Any help would be appreciated.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Let's Draw!</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body onload="drawShape();">
<canvas id="my_canvas" width="800" height="600">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</body>
</html>
Javascript:
function drawShape(){
var canvas = document.getElementById('my_canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d'); // ctx = context
ctx.fillStyle = "red";
// Filled triangle
ctx.beginPath();
ctx.moveTo(25,25);
ctx.lineTo(105,25);
ctx.lineTo(25,105);
ctx.fill();
// Stroked triangle
ctx.beginPath();
ctx.moveTo(125,125);
ctx.lineTo(125,45);
ctx.lineTo(45,125);
ctx.closePath();
ctx.stroke();
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
800x600 is relatively small and should be supported by all reasonable browsers that support canvas. Canvases 4 times the size should work. What browser/OS are you using?

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