Reinitializing the CanvasRenderingContext2D transform with resetTransform and harnessing the power

I've encountered an unexpected issue with the Google Closure Compiler in ADVANCED mode, and I'm struggling to understand it: it's renaming the function resetTransform of CanvasRenderingContext2D

Unfortunately, I can't directly share the production code where this problem occurred. However, I have managed to replicate the issue in a separate case available here

The snippet causing trouble is:

context.resetTransform ()
context.translate ( 0 , canvas.height )

which is being compiled as:

c.a();c.translate(0,b.height);

It seems like resetTransform should retain its original name, just like other members of CanvasRenderingContext2D. This mismatch is leading the browser to throw a "TypeError: c.a is not a function" error.

"c" is indeed an instance of CanvasRenderingContext2D. When I manually change c.a to c.resetTransform, everything works as expected.

I'm puzzled by this issue as I haven't found any documentation or references to it elsewhere.

I'm currently using the latest version of the compiler, which can be downloaded from:

I'm running java version 1.7.0_80, but even switching to an older version hasn't resolved the problem.

javascripthtml5-canvasgoogle-closure-compiler

Answer №1

resetTransform is currently labeled as an experimental feature on mozilla.org, which is why it has not been included in 

closure_compiler/externs/browser/html5.js
. The closure-compiler is unaware that this name should not be minified.

If you have the ability to compile closure-compiler from the source code (which is relatively simple to do), you can modify html5.js as follows:

/**
 * @return {undefined}
 */
CanvasRenderingContext2D.prototype.resetTransform = function() {};

After making this change, you will need to rebuild the compiler. It's important to note that changes to the externs files require a compiler rebuild to take effect.

Alternatively, you can raise an issue or submit a pull request at https://github.com/google/closure-compiler/issues/ to add the required API.

There may be a workaround to call resetTransform without minification in advanced-compile mode. Keep in mind that closure-compiler does not minify properties accessed via square brackets.

(/** Function */mycontext['resetTransform'])();

While I haven't personally tested this method, I believe it should work. Some adjustments may be necessary to ensure closure-compiler accepts the syntax.

The current instructions for building closure-compiler are a bit unclear. Here are some basic steps to get you started:

Begin by cloning the closure-compiler repository to your local machine:

git clone https://github.com/google/closure-compiler.git

To keep your local copy up to date, use the following command:

git pull

Next, build the compiler with the following commands:

ant clean
ant jar

Verify the version with:

java -jar build/compiler.jar --version

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

Display one div and conceal all others

Currently, I am implementing a toggle effect using fadeIn and fadeOut methods upon clicking a button. The JavaScript function I have created for this purpose is as follows: function showHide(divId){ if (document.getElementById(divID).style.display == ...

javascriptajaxhtmlcss

It seems like there is an issue with the res.render function as it is

My goal is to capture an input from my main website. Once the input is submitted, the page should automatically redirect to /view. Despite successfully triggering the redirection with console.log(), the res.render function does not seem to be working as ex ...

javascriptnode.jsexpressejs

The issue of empty data in Symfony 3 Form Ajax Post Requests

Displaying a list of tags with the option to add more dynamically. Using Ajax instead of Symfony Doctrine for form submission to allow dynamic updates without page reloads. This is how the form is structured in HTML: <div class="tag-form" ...

javascriptphpjqueryajaxsymfony

when webpack loads the bundle.js file, the mime type is converted to text/html

I'm currently working on implementing server side rendering for an application using react-redux and express for the server. We are also utilizing webpack to bundle our assets. To get started, I referred to the following documentation: https://redux ...

javascriptexpressreact-reduxserver-side-renderingserverside-javascript

Utilizing Images with 'General Drawing' in Highcharts

I'm currently attempting to create a task diagram using Highcharts. I had the idea of incorporating images using the <img> tag ren.label('<img src="/images/test.jepg', 10, 82) .attr({ ...

javascriptjqueryhighcharts

Having trouble displaying dynamically generated texture from a fragment shader in ThreeJS

I've been working on creating a texture using a Three.WebGLRenderTarget and then trying to access it in a fragment shader in the following stage. The concept is to execute the first stage once to generate a complex and costly SDF map, and then access ...

javascriptthree.jsglslwebgl

Hiding and showing div elements using CSS, JavaScript, and PHP

Here is the current code snippet: <? while ($row1 = mysql_fetch_object($result1)) { echo '<a href="#" onclick="showhide("'.$row1->id.'");">Name</a>'; while ($row2 = mysql_fetch_object($result2)) { ...

phpjavascriptcsshtml

Enhance link with dynamic content using an AJAX call

I need help appending a picture after a link with the same URL as the link. The current AJAX code is producing the following result: <a href="images/Draadloos.png" data-lightbox="gallerij"></a> Here is an example of what I would like to achie ...

javascripthtmlajax

How can I use AngularJS to save selected assets?

<div style="z-index: 1; position: absolute"ng-show="ctrl.company.selected"> <div style="" ng-repeat="Asset in ctrl.company.selected.Assets"> <div class="pd-5"style="width: 300px; background-color: white; border-bottom: gray solid ...

javascripthtmlangularjs

Tips for creating a unique exception in AngularJS?

I have a customException.js script with the following service: app.service('CustomException', function() { this.CustomException1 = function (message) { if (!message) { message = "Custom Exception 1 occurred!"; } return { ...

javascriptangularjsexception

Arranging divs using inline-block display. How to adjust the heights consecutively?

After much searching and attempting, I am still unable to achieve a simple task. My goal is to apply display inline-block to some divs while aligning them in a row, similar to the image below: https://i.sstatic.net/iLhLS.png The issue arises when number ...

javascripthtmlcssheight

Error: Attempting to access a property called 'name' on an undefined variable leads to a TypeError

I am a beginner with MongodB and nodejs. I have successfully implemented the GET method, which returns an empty array. However, when I tried to use POST in Postman for "categories," I encountered this error message: ExpressJS categories route app.js Err ...

javascriptnode.jsexpress

Steps for implementing AJAX to display a success function and update database results in real-time

I'm struggling with allowing my AJAX call to send data to my PHP file and update the page without a reload. I need the success message to display after approving a user, but their name doesn't move on the page until I refresh. The goal is to app ...

javascriptphpajaxforms

Troubleshooting AngularJS stateProvider functionality issues

I am new to angularjs. I am not getting any errors or results in my testing project below. index.html <html ng-app="UserAuth"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> ...

javascriptangularjs

I am experiencing an issue where my JSON array is only returning the last element. Any suggestions on how to

I am facing an issue with my JSON array and Ajax code. Here is the snippet of my code where I upload an Excel file, convert it to JSON, then save it as a string in my database: function exportExcelToTable() { $('#upload-excel-convert').chang ...

javascriptjqueryarraysjson

What could be the reason for my React Component not properly associating with the image?

The title appears to be correctly displayed, but there seems to be an issue with the images. I've thoroughly reviewed the code multiple times, but unfortunately, I'm unable to identify the problem. Please provide guidance on what changes need to ...

javascriptreactjs

Long taps do not activate the context menu in the mobile interface, as noted in the Google Maps API

During the development of my project, I encountered an issue with the Google Maps API not functioning correctly on mobile devices. I am utilizing GMaps.js, but even that example does not properly support right-click (long tap event). Here is a snippet of ...

javascriptapigoogle-mapsmapstouch

"Reacting to click events, all buttons have been successfully updated in ReactJS

When a button is clicked, all buttons are updated simultaneously. However, I am looking to only change the state of the specific button that is clicked. Please refer to the image links and code provided below. import React from 'react'; import & ...

javascriptreactjsevent-handlingdom-events

Correcting W3C validation issues is essential

I am encountering errors in my W3C validation process. Even though I have set <!DOCTYPE HTML> for my page, I continue to experience issues as shown in the image below. I have been trying to troubleshoot and resolve these errors without much success ...

javascripthtmlcssw3cw3c-validation

Implementing service injection within filters in NestJS

Looking to integrate nestjs-config into the custom exception handler below: import { ExceptionFilter, Catch, ArgumentsHost, Injectable } from '@nestjs/common'; import { HttpException } from '@nestjs/common'; import { InjectConfig } fro ...

javascriptnode.jstypescriptimportnestjs