I have just started learning how to draw on using HTML5 canvas, I'm trying to make a simple square but all I get is a blank screen, I don't get errors in the chrome console either
<!Doctype html>
<html>
<head>
<title>Drawing to a canvas</title>
<script type="text/javascript" language="javascript" >
window.onload = draw;
function draw()
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgba(0,200,0,1)";
ctx.fillRect = (36,10,50,50);
}
</script>
</head>
<body>
<canvas id="canvas1" width="400" height="300">
This text is displayed if your browser
does not support HTML5 Canvas.
</canvas>
</body>
</html>
This seems quite simple but it just won't work for me!
One error is the one Elon pointed out, but you are using the fillRect wrong as well:
ctx.fillRect = (36,10,50,50);
should be:
ctx.fillRect(36,10,50,50);
Please debug before asking for help!
You've got syntax error because you forgot about { after function name.
function draw() {
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgba(0,200,0,1)";
ctx.fillRect(36,10,50,50);
}
Related
I am working on a simple JS/HTML/CSS project. I have a box that's very big (400vw, 400vh) and it acts like a map. What I want to do is a mini-map for that huge thing on the top left corner.
What I understand is that it has to be done with canvas by getting the whole page, put it in canvas and then display it in another box that's just for example 10 times smaller. If my logic is correct, then what is wrong in the code?
<html>
<head>
<script defer src="js/main.js"></script>
<link rel="stylesheet" href="css/main.css">
<style>
#minimapCanvas {
position: absolute;
top: 0;
left: 0;
}
</style>
<script>
window.onload = function() {
// Get the canvas element and its context
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// Draw something on the main canvas
context.fillRect(0, 0, canvas.width, canvas.height);
saveCanvas();
}
function saveCanvas() {
// Get the canvas element and its context
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// Get the image data from the canvas
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
// Create a new canvas for the minimap
var minimapCanvas = document.getElementById("minimapCanvas");
minimapCanvas.width = 100;
minimapCanvas.height = 100;
var minimapContext = minimapCanvas.getContext("2d");
// Draw the image data on the minimap canvas
minimapContext.putImageData(imageData, 0, 0, 0, 0, minimapCanvas.width, minimapCanvas.height);
}
</script>
</head>
<body>
<div class="box">
<canvas id="myCanvas" width="500" height="500"></canvas>
<canvas id="minimapCanvas" width="100" height="100"></canvas>
</div>
</body>
</html>
and after I run the application I get a big black box instead of the minimap -
I have been trying to search every possible topic about JS mini-map in stackoverflow but couldn't find my solution. I also tried Chat GPT (which usually helps me).
EDIT:
Here is a github link to my repository (NOTE: you have to run it with a live server for example in VSCode, in order for the character's image to work properly) -
https://github.com/ApooBG/minimap
for some reason my html5 canvas is not showing up in the browser.
I am trying to draw a black square its just not loading the browser is just an empty page...
Please help me i dont know whats wrong..
<html>
<head>
<title>setup</title>
</head>
<body>
<canvas id="canvas" width="800" height="800"></canvas>
<script>
var canvas
var canvasContext
window.onload = function() {
canvas = document.getElementById("myCanvas")
canvasContext = canvas.getContext("2d")
canvasContext.fillStyle = "black";
canvasContext.fillRect(0,0,canvas.width,canvas.height)
canvasContext.fillStyle = "red";
canvasContext.fillRect(125, 250, 75, 75)
}
</script>
</body>
</html>
Your canvas 'is' there - it's just a white (empty) blob however.
None of your interactions with it work as you've tried to find it using the ID "myCanvas" rather than just "canvas" which is the ID you used in your HTML.
If you change this line:
canvas = document.getElementById("myCanvas")
to
canvas = document.getElementById("canvas")
It should work for you
This is the answer for the question:
canvas = document.getElementById("canvas");
The publish output of Animate CC gives html file and js file. I want to draw the same drawing two times in the same canvas. From this example, i want to have output as
How can i change the javascript to achieve this without having two canvas tag? I want to have numerous instance of it in single canvas tag.
If you are trying to achieve the image above, you can simply create two instances of simple_canv class.
Try this:
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
exportRootLeft = new lib.simple_canv();
exportRootRight = new lib.simple_canv();
exportRootRight.x = 555;
stage = new createjs.Stage(canvas);
stage.addChild(exportRootLeft, exportRootRight);
stage.update();
stage.enableMouseOver();
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
init_app()
}
Also, remember to increase the width of your canvas.
Is this what you are looking for?
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx1 = canvas.getContext("2d");
var ctx2 = canvas.getContext("2d");
ctx1.fillStyle = "red";
ctx1.fillRect(0,0,50,50);
ctx2.fillStyle = "blue";
ctx2.fillRect(50,0,50,50);
</script>
</body>
</html>
You can then change what you render.
I was trying to construct an RPG out of html5 and Javascript with the <canvas> element; but I ran across a real stumper of an error: my code does not modify the <canvas> element at all.
<!DOCTYPE html>
<head>
<title>BoxRPG</title>
</head>
<body>
<h3>Box RPG</h3>
<canvas id="rpgCanvas" width = "200" height = "100" style = "border:1px solid #FF0000;">failMessage</canvas>
<script type = "text/javascript">
var c = document.getElementById("rpgCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#000000";
</script>
</body>
</html>
I cannot for the life of me figure out this! Am I just being stupid and missing the obvious or is there some deeper problem with either code or my system.
fill style is not a fill command , you have to specify area to fill :
var c = document.getElementById("rpgCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
http://fiddle.jshell.net/ms7Lg/
if you seek advice , leave this all and start learning
http://jonobr1.github.io/two.js/
or maybe
http://snapsvg.io/
<!doctype html>
<html>
<head>
<title>Canvas test</title>
</head>
<body>
<script type="text/javascript">
c = getElementById('canvas');
ctx = c.getContext("2d")'
ctx.fillRect(10,10,10,10);
</script>
<canvas id="canvas" height ="100" width = "100"></canvas>
</body>
</html>
I have tried this on Chrome and IE 9, and neither of them display anything. Do you know why doesn't this work?
It's probably something stupid, and my friend is asking me to post this as he's too lazy to sign up, but I couldn't figure it out myself.
You need to put your code in a onload function.
For example:
window.onload = function() {
c = document.getElementById('canvas');
ctx = c.getContext("2d");
ctx.fillRect(10,10,10,10);
};
The reason for this is because you javascrpt code will be running before the <canvas> renders, and you want it to run afterwords.
Demo: http://jsfiddle.net/maniator/nCf7Y/
Syntax error here:
ctx = c.getContext("2d")'
Change to:
ctx = c.getContext("2d");
Also, you need to use the document object:
c = document.getElementById('canvas');
You're missing 'document'.
var c = document.getElementById('canvas');
The canvas is not there when the script is running. Move the <canvas> tag so that it is before the <script> tag.