I am trying to define a scale variable (s), where the image scales dynamically according to its value. I don't think the expression s*100 is evaluating as there is no difference in size. What is wrong.
<html>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
var s = 10000;
ctx.fillStyle = "rgba(0, 0, 200, 0.1)";
ctx.fillRect (0, 0, s*100, s*100);
}
}
</script>
</html>
The reason you don't see any change is because you are trying to render a gigantic rectangle onto a 150x150 canvas, so the part outside the canvas is ignored. Make your canvas really big and you'll see it working. Here's a working example, it keeps rendering the same square by increasing the scale each time. http://jsfiddle.net/3ZAex/2/
Figured it out.. it was because my canvas was too small.. width="150" height="150"
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
This question already has answers here:
Canvas width and height in HTML5
(3 answers)
Closed 2 years ago.
I would like to dynamically create a canvas, specifying the dimensions of the canvas at runtime; then I'd like to render an image over that canvas so that it fills the entire dimension of the canvas.
This works as expected, when I declare a canvas's width & height on an <canvas> element, as shown in this snippet (hidden by default):
<!DOCTYPE html>
<html>
<body>
<h3>
Source Image
</h3>
<img id="image" src="http://placehold.it/180x180">
<h3>Canvas:</h3>
<canvas id="canvas" width="200" height="200" style="border:1px solid #d3d3d3;">
</canvas>
<script>
window.onload = function() {
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var img = document.getElementById("image");
ctx.drawImage(img, 10, 10);
}
</script>
</body>
</html>
However, if I dynamically create the <canvas> element using Javascript, and use CSS to set the size after creating, the image will not fill the whole canvas:
<!DOCTYPE html>
<html>
<body>
<h3>
Source Image
</h3>
<img id="image" src="http://placehold.it/180x180">
<h3>Canvas:</h3>
<canvas id="canvas" style="border:1px solid #d3d3d3;">
</canvas>
<script>
window.onload = function() {
var c = document.getElementById("canvas");
c.style.width = "200px";
c.style.height = "200px";
var ctx = c.getContext("2d");
var img = document.getElementById("image");
ctx.drawImage(img, 10, 10);
}
</script>
</body>
</html>
I feel like I'm missing something pretty obvious here -- any help would be appreciated on how to get the dynamically rendered Canvas to look like the first snippet.
By using c.style.width, you're defining a scale for displaying it on your screen (it's just CSS).
To actually set the intrinsic size of the canvas, you do this:
window.onload = function() {
var c = document.getElementById("canvas");
c.width = 200;
c.height = 200;
var ctx = c.getContext("2d");
var img = document.getElementById("image");
ctx.drawImage(img, 10, 10);
}
<h3>Source Image</h3>
<img id="image" src="http://placehold.it/180x180">
<h3>Canvas:</h3>
<canvas id="canvas" style="border:1px solid #d3d3d3;"></canvas>
Note: This does not prevent you from having a different intrinsic size and display size. In fact, it's often useful if your page is displayed on a Retina screen with a high pixel density. In that case, you can have a 200x200 canvas, and set its CSS dimensions to be 100x100. That way every pixel in the canvas will be exactly 1 pixel of the screen it's displayed on.
More info on window.devicePixelRatio if you're interested.
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 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);
}
I'm trying to place an image on a canvas without resizing it. I thought drawImage(img, x, y) would do the trick, but it stretches the image to fill the canvas.
Also supplying drawImage(img, x, y, width, height) with the dimensions of my image doesn't seem to work.
Here's my code:
<canvas id="story" style="position:relative; width:800px; height:600px;"></canvas>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById("story");
var context = canvas.getContext("2d");
var img = document.getElementById("img1");
var width = parseInt(img.width);
var height = parseInt(img.height);
context.drawImage(img, 0, 0, width, height);
}
</script>
<img id="img1" alt="" src="http://link to image"/>
Thanks in advance!
PS: I added the parseInt's to make sure that drawImage gets valid values.
Don't use CSS to size your canvas. That creates a default sized canvas and stretches it. Set the canvas dimensions directly on it and you'll get a 1 to 1 pixel drawing space.
<canvas id="story" width="800" height="600" style="position:relative;"></canvas>
Trochoid is right, the style attribute on your canvas tag is causing problems. You could set it in the HTML, as he suggests, or better yet you can leave it blank and set it dynamically in the JS:
<canvas id="story"></canvas>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById("story");
var context = canvas.getContext("2d");
var img = document.getElementById("img1");
var width = parseInt(img.width);
var height = parseInt(img.height);
canvas.height=height;
canvas.width=width;
context.drawImage(img, 0, 0);
}
</script>
<img id="img1" alt="" src="http://link to image"/>
Also make sure you get the width and height of the image and draw it AFTER it has been loaded.
img.onload = function () {
var width = parseInt(img.width);
var height = parseInt(img.height);
context.drawImage(img, 0, 0, width, height);
};
You have to first load the function image perfectly before rendering on the screen to do that follow the below code..
<img id="demo-img" src="image_name.png">
<br>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3">Your browser does not support the HTML5 canvas tag
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("demo-img");
img.onload=function fun(){ctx.drawImage(img,0,0,img.width,img.height,0,0,img.width,img.height)}
</script>
Try using this library I recently created which can load an image, resize it fixed width & height or precentage, convert to and from other formats like base64 or blob, and allows you to apply a watermark.
var CanvaWork = new CanvaWork();
CanvaWork.loadImage("yourimage.png", function(obj){
console.log(obj.canvas); // The usable canvas
console.log(obj.width);
console.log(obj.height);
console.log(obj.image); // Contains the image file
});
https://github.com/vnbenny/canvawork.js
Hope this helps you!