How Put Percentage Width into HTML Canvas (No CSS)

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



Leave a reply



Submit