Canvas Default Size

Canvas in basic HTML page always sized as 300x150.

I think the width and height that you are referring to-- are html attributes and not css.

They can be modified like this;

<canvas width="1024" height="768" style="border:1px solid black;">

</canvas>

How can i change default max canvas size?

Canvas size is device dependent. Have a look at Maximum size of a <canvas> element, this may help you to resolve the issue.

Image in canvas got wrong size, ratio and got blur

When you create a canvas element, its default size is 150 CSS pixels by 300 CSS pixels. If your canvas element is resized using CSS rules, the "internal" size is maintained to 150*300 unless you change the attributes canvas.height and canvas.width. What does it mean in your code?

Your canvas has been stretched, the width changed to 100% of the window and the "external height" is 500, while the "internal" size is still 150x300, so anything you put draw will be stretched in the same way.

You can check these related Q&A: https://stackoverflow.com/a/4939066/1919228

Not getting actual canvas height and width, and fillRec()t is blurred out

Your problem is that the canvas has two sizes: the actual HTML element size and the drawing surface size

When you size the canvas with CSS, you only affect the drawing size. In order to change the element size, you need to set it with the height and width attributes inside the canvas element.

This is why you are getting 150 x 300 pixels all the time. That is the default size of the canvas element. You haven't actually change the size of the canvas element, only the size of its drawing surface.

Just change your canvas element like this

<canvas id="myCanvas" width="600" height="800"></canvas>

If you want more dynamic values you can use javascript to dynamically change the value of the height and width attributes.

var canvas = document.getElementById('myCanvas');
canvas.width  = window.innerWidth;
canvas.height = window.innerHeight / 2;

Changing the size this way resizes the element and the drawing surface. Resizing with CSS only modifies the canvas drawing surface.

The blurred out image might be a product of the wrong resizing of your canvas, but I am not sure.

Here is more info: Canvas Basic Usage

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!

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.

HTML5 Canvas Font Size Based on Canvas Size

Simply scale the font-size with a factor.

The basis

Lets say your canvas default size is 1000 pixels and the font size is 80 pixels (canvas converts pt to pixels - I use 80 here for simplicity, see bottom).

That will create a relationship of:

ratio = 80 / 1000 = 0.08

Lets verify when canvas width is 1000 by multiply with that ratio:

fontSize = 1000 * ratio = 80;

And we see we have 80 for the font as expected.

Now that the canvas size is smaller, lets say 500 pixels:

fontSize = 500 * ratio = 40;

That should correspond about to the relationship. Note that fonts do not behave linearly like that but it will be approximately correct.

Now simply set the size of the font:

ctx.font = (fontSize|0) + 'px myFont';

Solution

The final code from this is in essence very simple:

var fontBase = 1000,                   // selected default width for canvas
    fontSize = 70;                     // default size for font

function getFont() {
    var ratio = fontSize / fontBase;   // calc ratio
    var size = canvas.width * ratio;   // get font size based on current width
    return (size|0) + 'px sans-serif'; // set font
}

Every time you need to update the font (ie. resize) just call:

ctx.font = getFont();                  // call getFont to set new font size

The default values are snapshot of whatever size works in the moment/during development.

Live demo

To convert point to pixel size you simply use system DPI / 72:

80 pt * (96 / 72) = 107 pixels @ 96 DPI.

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.)

---

Related Topics