Every time my Canvas loads, it consistently fills up the entire width but neglects to occupy the complete height

My Canvas is only taking full width, but not full height. Here's my code snippet in an attempt to make it both full width and full height:

export class AimComponent implements OnInit {

  @ViewChild('canvas') myCanvas: ElementRef;
  public context: CanvasRenderingContext2D;

  ngOnInit() {
    this.ngViewInit();
  }
  ngViewInit(){
    this.context = 
    (<HTMLCanvasElement>this.myCanvas.nativeElement).getContext('2d');
    this.draw();
  }

  draw() {
    this.myCanvas.nativeElement.width = document.body.clientWidth;
    this.myCanvas.nativeElement.height = document.body.clientHeight;
  }
}

Answer №1

By utilizing window.innerWidth and window.innerHeight in place of

document.body.clientWidth/clientHeight
, I successfully resolved the issue at hand.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are the drawbacks of removing comments from polyfills.ts in Angular CLI when using Internet Explorer?

Encountering a similar problem as described in Angular4 Application running issues in IE11. Although the suggested solution resolved the issue, I am left wondering why the lines referring to necessary polyfills for IE9, IE10, and IE11 were initially comm ...

Is it feasible to utilize math.max with an array of objects?

When it comes to finding the largest number in an array, solutions like this are commonly used: var arr = [1, 2, 3]; var max = Math.max(...arr); But how can we achieve a similar result for an array of objects, each containing a 'number' field? ...

Is there a way to refresh the list automatically after deleting an item using Firebase?

When I use ngFor on a list to display multiple recordings in a table, I have two methods in my TypeScript file - one for getAll and another for delete, as shown below: HTML: <tr *ngFor="let value of imagesList"> <td scope="row& ...

What steps can I take to ensure Angular 8 is compatible with IE11?

After upgrading to Angular 8 with the ng update command, it initiated migration scripts that removed the es6/es7 imports from the polyfills.ts file. I had read that Angular would generate a special build for older browsers, such as IE11, eliminating the ne ...

Ways to verify if a function has completed execution and proceed to invoke another function

I am seeking to verify if a user has chosen an item from the ngFor form and then redirect them to another page upon submitting the form with the updated value. HTML: <mat-select placeholder="Treatment" [(ngModel)]="model.TreatmentA" name="TreatmentA" ...

I am looking to include an image URL in the JSON data of my Angular form and then send it to the server. The image URL will be retrieved from the server response

How can I upload an image URL to my Angular form as JSON data and send it to the server? The server needs to respond with the image URL after renaming the image. I need to retrieve the new image URL from the server, update my form with it, and then submit ...

Refreshing pages when routing with Angular 2 router

While delving into the world of Angular 2, I encountered a challenge with setting up a basic route. Every time I click on a link, the browser redirects to the new route but it seems like all the resources are being re-requested, which goes against the beha ...

Using ts-node throws an error when checking if window is equal to "undefined" using typeof

I encountered an issue with my code where I used typeof window == "undefined" to check for a browser environment. When running this code with ts-node, I ran into the following error: typings/Console.ts:36:10 - error TS2304: Cannot find name 'window&a ...

The withLatestFrom operator will not trigger with a null value

Working on an Angular project that utilizes @ngrx/effect, we are incorporating an observable stream with the withLatestFrom rxjs operator. Here is a glimpse of our observable effect stream: @Effect() handleUsersData$ = this.actions$ .pipe( ofType(HAND ...

Guide to importing OBJ file into three.js using TypeScript

Currently, I am utilizing TypeScript along with three.d.ts obtained from definitely typed. While I have successfully been using THREE.JSONLoader, I am encountering difficulties with implementing an OBJLoader from here in a TypeScript project. It seems th ...

What is the best way to implement a nested fetch call?

I have a piece of code similar to the one below that is functioning properly: const url = "https://something"; let data2 = JSON.stringify({ source: "https://someimage.jpg" }); const test1 = fetch(url, { method: "POST", hea ...

Looking for help with getting ag-grid to work on Angular 2. Any new tutorials available?

Looking for a recent and effective tutorial for using ag-grid with Angular 2. The official website's tutorial is not working for me, any help would be appreciated. If anyone can provide some code examples as well, it would be really helpful. Thank y ...

What is the procedure for disabling validation in the onValueChanged function within Angular?

Is there a way to disable validation in the onValueChanged function in Angular? Check out this demo I have a form where I change the device value upon completion. However, every time I click on the device (in the onValueChanged function), it triggers the ...

"Step-by-step guide on implementing a click event within a CellRenderer in Angular's Ag-Grid

paste your code hereI'm currently working on implementing edit and delete buttons within the same column for each row using Angular ag-Grid. To visually represent these buttons, I am utilizing icons. While I have successfully displayed the edit and de ...

'Unable to locate the identifier "system" in Angular 2' - troubleshoot this unique error

My routes file contains a reference to 'system' which is causing an error in my Visual Studio Code. The error states that it cannot find the name 'system'. I have attached a screenshot for reference: https://i.sstatic.net/W2oD2.png ...

What is the correct way to bind by reference when utilizing a function that returns an object?

I currently have an object in my Component: this.user = Authentication.user; It's working perfectly fine as it copies the reference. So, if Authentication.user changes, this.user in my Component also changes accordingly. However, I am curious to kn ...

Having issues with Angular material autocomplete feature - not functioning as expected, and no error

I have set up my autocomplete feature, and there are no error messages. However, when I type something in the input field, nothing happens - it seems like there is no action being triggered, and nothing appears in the console. Here is the HTML code: ...

Best practice in Angular 4: utilize services to load and store global data efficiently

I would like to create an angular 4 application that allows me to search for a user in a database and use their information across different routes. The issue I am facing currently is that when I load data via a service, change the route, and then return, ...

What sets apart Object.assign {} from Object.assign []?

While reviewing code done by a previous developer who is no longer with us, I observed that they sometimes used Object.assign({}, xyz) and other times they used Object.assign([], abc); Could there be a distinction between the two methods? ...

What is the correct way to forcefully override an existing type in TypeScript?

As I work with Formik, a React form library, I find myself creating custom fields and utilizing the generic Schema type provided by Formik. This type represents the values object, which holds all the values for each field in the form. One of the custom co ...