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

What could be the reason for parent props not updating in child components in VueJS?

Executing code on the server-side (back-end) using Javascript: A step-by-step guide

jquery-powered scrollable content container

Angular Oops! We ran into a small hiccup: [$injector:modulerr]

Steps to seamlessly integrate puppeteer with an active Chrome instance or tab

The Iframe contains its own scroll feature within the body

encountering problems with Next.js routing resulting in 404 errors

Disabling a chosen option within a dropdown menu

Unable to display HTML content on a page using the foreach callback in JavaScript

Break up a list into separate paragraphs and style each word using individual CSS

The backend error message isn't triggering an alert!

Creating a variable in the outer scope from within a function

Hide the overlay fullscreen menu upon clicking an anchor link

eliminate element from array and refresh table

Tips for updating the class of a button upon clicking it

Encountering the 'data is null' error when making a Twitter API request, yet the data is successfully displayed in the browser

Nodemon fails to restart: [nodemon] attempting restart because of modifications

Is there a way to split each foreach value into distinct variables?

The Google Pie chart is displaying outside of the designated div area when placed inside a dropdown menu

Deactivate Search Functionality for Users who are not Logged in on an Angular 2 Application