Extract the canvas code line from a function without using the eval function

Question

Extract the canvas code line from a function without using the eval function

Greetings, fellow Stackers! Please pardon my formatting as this is my debut question on this platform.
I am currently working on a basic vector drawing tool. If you want to view the full CodePen code for reference, feel free to click here.

Here's the scenario: I've created a DRAW object with a 'temp' method that contains canvas drawing commands within a template structure. I aim to insert a variable code line from other methods of this object (such as add, sub...) in between.

temp(operation){

  ctx.beginPath();
  ctx.moveTo(o.x, o.y);  
  eval(operation);
  ctx.strokeStyle="red";
  ctx.stroke(); 
}

I'm seeking assistance in finding an alternative to using eval(), as it has been noted to be problematic and error-prone. Any other suggestions or recommendations would also be highly appreciated. Thank you kindly.

javascript eval

Answer 1

Answer №1

One way to utilize the temp function is by passing a function as an argument.

performTask(parameters) {
  // code implementation
}

temp(operation) {
  const parameters = {};

  operation(parameters);
}

temp(performTask)

Answer 2

One way to utilize the temp function is by passing a function as an argument.

performTask(parameters) {
  // code implementation
}

temp(operation) {
  const parameters = {};

  operation(parameters);
}

temp(performTask)

Answer 3

Answer №2

After encountering an issue passing arguments to DRAW.temp along with an add function, I made a change that resolved the problem. Now, instead of passing arguments separately, I simply pass DRAW.add and specify the arguments (v1,v2) inside the temp method, which works correctly.

DRAW={
add(v1,v2){},
sub(v1,v2){},   /////operations

temp(operation){

  console.log(operation)
  ctx.beginPath();
  ctx.moveTo(o.x, o.y);  
  operation(v1,v2);/////////////input operation
  ctx.strokeStyle="red";
  ctx.stroke();
 } 
 };
var draw =DRAW.temp;
var add =DRAW.add;

draw(add)

Answer 4

After encountering an issue passing arguments to DRAW.temp along with an add function, I made a change that resolved the problem. Now, instead of passing arguments separately, I simply pass DRAW.add and specify the arguments (v1,v2) inside the temp method, which works correctly.

DRAW={
add(v1,v2){},
sub(v1,v2){},   /////operations

temp(operation){

  console.log(operation)
  ctx.beginPath();
  ctx.moveTo(o.x, o.y);  
  operation(v1,v2);/////////////input operation
  ctx.strokeStyle="red";
  ctx.stroke();
 } 
 };
var draw =DRAW.temp;
var add =DRAW.add;

draw(add)

Extract the canvas code line from a function without using the eval function

Answer №1

Answer №2

Similar questions

Issues with HTML structure across various devices

Preventing jQuery from loading a div if it already exists: a step-by-step guide

Retrieve dynamic data for Pivot in Devexpress AngularJS

Having trouble transferring ASP server control value to a Javascript function

IE8 is not properly handling nested HTML elements that have the display:none property set

What is the best way to programmatically change the event tied to an element's click

Creating an illustration with HTML5 from an image

Having trouble with Next.js environment variables not being recognized in an axios patch request

Avoid running another process before the current one finishes in jQuery

Enter key not triggering submission in jQuery UI autocomplete field

I am currently facing a challenge in animating my ng-show/ng-hide animation

React's memo and/or useCallback functions are not functioning as anticipated

What could be causing the 403 Error when using Blogger API with AngularJS?

The mouseup event fails to trigger upon dropping a component with React-dnd

How to implement a modal popup in Vue.js using an anchor tag

I have my server running on port 6666. I am able to receive a response from Postman, however, when I attempt to access localhost:6666 in my browser, it displays a message

React: automatically close other SubMenus when a new SubMenu is opened

Enhancing user experience with AngularJS: Harnessing ng-Click for seamless task management on display pages

What is the best way to handle a JSON arraylist in a Node.js environment?

What is the best way to upload a canvas image from a GUI to the back-end using an AJAX call and setting the content-type as "image/jpeg"?