What is causing the image to not be centered in the canvas when using AngularJS?

Can you please help me troubleshoot why my image is not centered using the method below?

function drawImage() {
                    clear();
                    element.save();
                    element.scale(currentScale, currentScale);
                    element.rotate(currentAngle * Math.PI / 180);
                    element.drawImage(image, canvas.width/2-image.width/2, canvas.height/2-image.height/2);
                    element.restore();
                }

Here is the code snippet: http://plnkr.co/edit/Tvika6ygEBGmR9OMLSaT?p=preview

Expected outcome:

https://i.sstatic.net/KhvOn.png

javascriptangularjs

Answer №1

To begin, start by applying a scale transformation using the formula:

image.width * currentScale

Next, ensure to use the function

Math.abs() to obtain a positive value.

You should also confirm that half of the image width is not greater than half of the canvas width.

The values you are currently working with are -1578 and -2129.

When executing this code snippet

 element.drawImage(image, canvas.width/2-image.width/2, canvas.height/2-image.height/2);

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

Bootstrap 4 tabs function perfectly in pairs, but encounter issues when there are three of them

Having trouble with bootstrap4 tabs not working properly? They function well with 2 tabs using the code below: <div class="row"> <div class="col-12"> <ul class="nav nav-tabs" id="registration-picker-acc-select" role="tablist"> ...

javascripthtmlcssbootstrap-4

The ngFor directive in Angular2 consistently collapses the identical <tr> element

Greetings, I am a newcomer to the world of web development. Recently, I used the *ngFor directive in Angular to generate multiple rows with collapsible details. However, when I click on a row, it always collapses the same div, instead of the corresponding ...

jqueryangularangularjsngfor

Identify and apply a special effect to the initial input element within a popup using jQuery

I have a variety of popups containing multiple input fields. I am aiming to emphasize the initial input element of each of my popups, without the utilization of ids: This is my current code snippet: function initializePopups(){ $('*[id*=Popup]&a ...

javascriptjqueryhtmljquery-mobile

Tips for accessing information from an Angular Resource promise

I am currently facing an issue when trying to read data from an angular promise that was returned. Before, I had the following code: var data = category.get({id:userid}); Later, I realized that the data being returned was an unresolved promise. So, I ma ...

javascriptangularjs

Ways to display the ping of a game server on your screen

Is there a way to display the game server's ping on the screen like in the example below? this.tfEnter.text = ShowPing + " ms"; Sometimes the code snippets provided in examples may not function properly. Channel List Image: https://i.stack ...

javascripttypescriptactionscript-3

exploring the ins and outs of creating computed properties in TypeScript

How can I store an object with a dynamically assigned property name in an array, but unsure of how to define the array properly? class Driver { public id: string; public name: string; constructor(id , name) { this.id = id; th ...

javascripttypescript

Generating a JSON data set with two separate pieces of data, not contained within a dictionary

Within my application, there exists an HTML table that is dynamically generated using the following code: function generateTableRow() { var emptyColumn = document.createElement('tr'); emptyColumn.className ='data'; emptyColumn.inne ...

javascriptjqueryjsonajaxdjango

Is it possible for me to listen to an AngularJS event using regular JavaScript, outside of the Angular framework?

Is it possible to listen to an event triggered in AngularJS using regular JS (outside of Angular)? I have a scenario where an event is being emitted using RxJS in Angular 2. Can I observe that event from pure JS? Here's some example pseudo code: imp ...

javascriptangulartypescriptrxjsdom-events

Ensuring the accurate usage of key-value pairs in a returned object through type-checking

After generating a type definition for possible response bodies, I am looking to create a function that returns objects shaped as { code, body }, which are validated against the typing provided. My current solution looks like this: type Codes<Bodies> ...

javascripttypescripttypes

Why isn't the AngularJS injected view resizing to fit the container?

As a novice delving into a project in the MEAN stack, I'm encountering inconsistent HTML previews. When I view it independently versus running it from the project, the display varies. Here's the intended appearance (in standalone preview): imgu ...

javascripthtmlcssangularjs

Using Google Apps Script to input data into the next available row

Utilizing Google Apps Script, I am retrieving data from another spreadsheet and storing it daily in a sheet named "DATABASE". Although my current solution is basic, it keeps overwriting existing data. I wish to enhance the script to copy data from the imp ...

javascriptjavagoogle-apps-scriptgoogle-sheets

Troubleshooting: Error message when using getElementById in JavaScript

Issue: While creating a simple demo site to experiment with JavaScript, I encountered a "TypeError: document.getElementById(...) is null" when attempting to change the display value of an element to block upon button click. Despite trying common solution ...

javascripthtml

Unleash the power of a module by exposing it to the global Window object using the dynamic

In my development process, I am utilizing webpack to bundle and manage my TypeScript modules. However, I am facing a challenge where I need certain modules or chunks to be accessible externally. Can anyone guide me on how to achieve this? Additional conte ...

javascripttypescriptgulpwebpack

Backend undergoing fluctuations in hourly values

When passing JS dateTime to the backend using ajax(axios), I encountered a discrepancy in the timestamps. Prior to the post request, I have the following timestamp: Sun Nov 04 2018 21:53:38 GMT+0500 However, upon reaching the backend, the timestam ...

javascriptphpajaxdatetime

"Resolving Compatibility Issues Between Bootstrap 4 and fullcalendar.js: Embedding Fullcalendar Within a Bootstrap 4 Modal

I am currently using fullcalendar.js in conjunction with Bootstrap 4 modal. Whenever I click on a bootstrap4 button, a modal appears with the fullcalendar component displayed. However, upon initial load, I encounter this issue: https://i.sstatic.net/nni ...

javascriptcssbootstrap-4fullcalendar

Encountering Error 405 when attempting to click on the "+" button on a Django project quiz webpage

I am currently working on developing a beginner application - a newbie quiz to help individuals learn various programming languages. In the process, I encountered the following message: https://i.sstatic.net/4gezT.png #views.py from django.shortcuts impor ...

javascriptpythondjango

Leverage the potential of the value parameter within a mongoose scope

I am currently trying to retrieve emails of a user based on their id. However, I have encountered an issue due to the asynchronous nature of the mongoose function. Mail.find({receiver_id: '#id#'}, function(err, mails) { var result = []; ...

javascriptnode.jsmongodbasynchronousmongoose

Ways to inspect a number within a span and adjust its color depending on the value?

Can someone help me figure out why this code is not reading the value correctly? Check it out here This is the HTML: <a class="InterestLink">Click me</a> <div id="InterestExpander"> <div id="InterestExpanderX"> ...

javascriptjqueryhtmlcss

increasing the `WeakSet` size while simultaneously causing a memory overload

There's something strange I observed. Despite using a WeakSet which should not retain any references, the code below still manages to exhaust memory: 'use strict'; require('babel-polyfill'); const s = new WeakSet(); for (let i = ...

javascriptnode.jsecmascript-6babeljs

Steps to create a toggle feature for the FAQ accordion

I am currently working on creating an interactive FAQ accordion with specific features in mind: 1- Only one question and answer visible at a time (I have achieved this) 2- When toggling the open question, it should close automatically (having trouble with ...

javascripthtmlcss