How put percentage width into html canvas (no css)
You need to set the size of the canvas in pixels or you will not only reduce the quality of its content but if you want to draw on it the mouse-coordinates will be off as well. Don't use CSS to scale canvas if you're gonna use it interactively.
I would recommend you adjust your image then adopt the canvas to whatever size the image is. You can do this by using getComputedStyle(element)
which gives you whatever size the element is set to in pixels.
After image's onload
(as you need to be sure the image is actually loaded to get its size) or later if you change the image (CSS) size on the go, you can do this:
/// get computed style for image
var img = document.getElementById('myImageId');
var cs = getComputedStyle(img);
/// these will return dimensions in *pixel* regardless of what
/// you originally specified for image:
var width = parseInt(cs.getPropertyValue('width'), 10);
var height = parseInt(cs.getPropertyValue('height'), 10);
/// now use this as width and height for your canvas element:
var canvas = document.getElementById('myCanvasId');
canvas.width = width;
canvas.height = height;
Now the canvas will fit image but with canvas pixel ratio 1:1 to help you avoid problems when you're gonna draw on the canvas. Otherwise you will need to convert/scale the mouse / touch coordinates as well.
Set canvas shapes size as percentage of canvas
What prevents you from simply accessing the canvas width on draw?
var canvas = document.getElementById("canvas");var canvasContext = canvas.getContext("2d");canvas.width = 100;canvas.height = 30;
function draw(color) { canvasContext.clearRect(0, 0, canvas.width, canvas.heigh); canvasContext.fillStyle = color; canvasContext.fillRect(0, 0, canvas.width, canvas.height * 0.5);}draw("#FF0000");
setTimeout(function() { canvas.height *= 2; draw("#00FF00");}, 1000);
setTimeout(function() { canvas.height *= 2; draw("#0000FF");}, 2000);
<canvas id="canvas" style="border: 1px solid black"></canvas>
HTML5 Canvas 100% height and width
body, #canvasRain {width:100%; height:100%; margin:0px;}
will set your size properly but your problem is that your canvas height/width you're using to do your drawing doesn't pick up the proper px
values when setting them with %'s. And that's where the scaling comes in with the fuzzy flakes. It takes some default canvas size and stretches to 100% of the view. Adding something like
bufferCanvas.width = canvas.width = window.innerWidth;
bufferCanvas.height = canvas.height = window.innerHeight;
seems to do the trick. And you might want/need to handle resize events to recalculate it. Here is a sample. I couldn't get jsFiddle to work for me, so it's just the whole thing.
HTML Canvas Width
So it take some delay to resize image? So don't init it when canvas not resize yet.
canvas.width = width;
canvas.height = height;
canvas.style.backgroundImage = "...."
Hope this help.
Setting canvas 'width/height' in CSS results in surprising behavior
This is what's happening:
A canvas has a default width of 300 pixels and a height of 150 pixels.
When you don't set them explicitly in the markup, your JavaScript lines
var width = canvas.width;
var height = canvas.height;
Return the default 300 and 150 respectively.
So the drawing is done in an area of 300x150 pixels, and then your css resizes the canvas to 300x300, and the blurring happens because of that. (like when sizing a picture beyond its original size, blurring happens.)
Put Image Into HTML Canvas (Fit Width and Height)
Use the dWidth
and dHeight
arguments for the drawImage
function (MDN).
ctx.drawImage(img, imgx, imgy, canvas.width, canvas.height);
Resize HTML5 canvas to fit window
I believe I have found an elegant solution to this:
JavaScript
/* important! for alignment, you should make things
* relative to the canvas' current width/height.
*/
function draw() {
var ctx = (a canvas context);
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
//...drawing code...
}
CSS
html, body {
width: 100%;
height: 100%;
margin: 0;
}
Hasn't had any large negative performance impact for me, so far.
Change default width and height Canvas size in Angular
This is my one example for canvas in Angular-13
app.component.ts File
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent implements AfterViewInit {
context: any;
@ViewChild('myCanvas')
private myCanvas: ElementRef = {} as ElementRef;
ngAfterViewInit(): void {
this.context = this.myCanvas.nativeElement.getContext('2d');
if(this.context) {
this.myCanvas.nativeElement.width = 400;
this.context.font = '30px Arial';
this.context.fillText('Hello World', 10, 50);
}
}
}
app.component.html File: I have added my canvas in template file like below.
<canvas #myCanvas>
Hope this help. Thanks!
HTML canvas dimensions are right but the context uses the default ones
Both the canvas itself and the canvas element have a width and height, they're separate things. If they're not the same, the content of the canvas is automatically scaled to fit the element. If you want a 1:1 relation, you need to set the actual width
and height
of the canvas
.
Just after:
var w = c.offsetWidth;
var h = c.offsetHeight;
add
c.width = w;
c.height = h;
Example:
function draw() { var cm = 6; // canvas margin var canvases = document.getElementsByClassName('container'); for (var i=0; i<canvases.length; i++) { var c = canvases[i]; var w = c.offsetWidth; var h = c.offsetHeight; c.width = w; c.height = h;
console.log('w: ' + w + '; h: ' + h);
var ctx = c.getContext("2d"); ctx.beginPath(); ctx.lineWidth = 2; ctx.strokeStyle = '#561a04';
ctx.moveTo(cm, cm); ctx.lineTo(w-cm, cm); ctx.lineTo(w-cm, h-cm); ctx.lineTo(cm, h-cm); ctx.lineTo(cm, cm);
ctx.stroke(); }}draw();
.parent { width: 200px; height: 200px; position: relative;}.parent canvas { width: 100%; height: 100%;}
<div class="parent"> <canvas class="container"></canvas></div><div id="status"></div>
Related Topics
How to Change Font in Ipython Notebook
Twitter Bootstrap Tabs Not Working: When I Click on Them Nothing Happens
How to Restrict My Input Type="File" to Accept Only Png Image Files Not Working in Firefox
HTML Form File Uploads Doesn't Upload File
How to Get a Div to Resize Its Height to Fit Container
How to Make a Div 100% of Window Height
Are HTML Image Maps Still Used
Cross Browser Method to Fit a Child Div to Its Parent's Width
How to Remove This Horizontal Scrollbar in Bootstrap 3
Ring-Shaped Process Spinner with Fading Gradient Effect Around The Ring
Why Setting Absolutely Positioned Element's Sibling as Position:Relative, Brings It Above The Former
Delete HTML Tags in Sed or Similar