Creating artwork on a digital canvas with the help of Angular.js

I'm attempting to create a circle wherever the user clicks on the screen using Angular on canvas. However, my code doesn't seem to be functioning correctly. Feel free to check out my plnk link below:

http://plnkr.co/edit/rYVLgB14IutNh1F4MN6T?p=preview

var app = angular.module('plunker', []);

app.controller('MainController', function($scope) {
  $scope.doClick = function(event){

     var x = event.clientX;
     var y = event.clientY;
     var offsetX = event.offsetX;
     var offsetY = event.offsetY;

      //alert(x, y, offsetX, offsetY);

      //console.log(x, y, offsetX, offsetY);

      var ctx = getContext("2d");

      //draw a circle
      ctx.beginPath();
      ctx.arc(x, y, 10, 0, Math.PI*2, true); 
      ctx.closePath();
      ctx.fill();
  };

  $scope.test="test";
});

Any assistance would be greatly appreciated.

Answer №1

When working with canvas, it's important to use it correctly.

Make sure to assign an ID or Class to your canvas elements so that you can easily target them. In this case, I've added an ID to the canvas element for easy targeting using document.getElementById.

<canvas id="canvas" ng-click="doClick($event)" width="600" height= "600"></canvas>

In your JavaScript code, make sure you are targeting the canvas element and applying the context correctly.

Here is how your updated doubleClick function should look like:

$scope.doClick = function(event){

 var x = event.clientX;
 var y = event.clientY;
 var offsetX = event.offsetX;
 var offsetY = event.offsetY;
 alert(x, y, offsetX, offsetY);

 /// Make sure to target the canvas element and apply the context to it
 var canvasElement = document.getElementById("canvas");
 var ctx = canvasElement.getContext("2d");

  //draw a circle
  ctx.beginPath();
  ctx.arc(x, y, 10, 0, Math.PI*2, true); 
  ctx.closePath();
  ctx.fill();

};

It is recommended to encapsulate this code in a service for better organization.

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

Setting the starting value of `x` when iterating through `object` using `for(x in object)` loops

Here is a code sample with an array of cars: <html> <body> <script type="text/javascript"> var mycars = new Array(); mycars[0] = "Saab"; mycars[1] = "Volvo"; mycars[2] = "BMW"; ...

Dynamically Loading CSS files in a JQuery plugin using a Conditional Test

I'm trying to figure out the optimal way to dynamically load certain files based on specific conditions. Currently, I am loading three CSS files and two javascript files like this: <link href="core.min.css" rel="stylesheet" type="text/css"> & ...

I am interested in using an image upload box that includes a hidden input field. However, I have encountered issues with the functionality when the input field is hidden. Does anyone have any suggestions on how

I have limited experience and need some assistance with resolving this particular issue. I am looking to create an image upload box that works when clicked on the input field. Thank you in advance. function readURL(input) { if (input.files && ...

Designing a pair of elements within a single container

I am trying to achieve a layout where Element 1 and Element 2 can grow independently in height. However, I want the container's height to always match that of Element 2, while allowing Element 1 to grow as much as possible without exceeding the height ...

Issues related to API calls and mongodb operations

I'm facing a challenge with integrating an API call using request in mongoose with mongodb. I need some assistance! The issue revolves around the API call and mongodb- specifically, I make the call over an interval, delete all existing data using dele ...

Checking for the presence of text within a span tag - a simple guide

see fiddle if there is an already allotted time slot for the patient, change its color to yellow using jquery on the client side. In my example, if I assign a time slot for the first time, it turns green and when assigning another one, the previous slot tu ...

Leveraging a specific section of an HTML5 CSS3 Bootstrap template in a separate template

As I create my website using a combination of free templates, I often find myself needing to merge elements from different designs. One specific example is wanting to incorporate the "Client Logo Slider" component from template 2 into my original template. ...

VueJS: using dynamic class names within the style attribute

Within my VueJS application, I have implemented Materializecss modals within single page components. Each modal requires a unique dynamic ID due to the application's requirements. The code snippet below showcases this: <template> <div :i ...

Using Vue.js to invoke an external JavaScript function for search functionality

In my vue.js application, I have a list of users with backend pagination. Now I want to implement a search functionality. I attempted to call the method like this: watch: { search: function() { Crud.methods.getItems(); } }, Howe ...

What is the best method for effortlessly inserting multiple images into a web form that are sourced from a database?

Greetings, I am currently in the process of creating a page where users can view specific car details and related photos. At the moment, I am utilizing a SQL table to store the image paths and then manually assigning each path as an "ImageUrl" attribute to ...

Converting to JSON: "Property or method not supported by object"

Having a JavaScript Class with a method, but encountering an error when trying to call it toJSON. The reason behind this error remains a mystery to me. try { if (this.TabloEkId == undefined || this.TabloEkId == "") { throw errEksikVeri; } ...

How to calculate the number of distinct elements using jQuery

Here is the HTML code I have: <input type="hidden" name="product_id" value = "1" class="product_id" /> <input type="hidden" name="product_id" value = "2" class="product_id" /> <input type="hidden" name="product_id" value = "5" class="produc ...

Ways to halt the animation on a background image

I am facing a challenge with the animation on the background image of my website. The image is constantly moving to the left, and when it reaches the end, it starts over. However, I would like the image to switch direction when it reaches the edge - goin ...

Accessing ASPX elements from an External JavaScript File

Here's a question I have: I am working with an aspx control, such as a textbox, which I reference using document.getElementById('<%=textbox.ClientID%>').value. Strangely, when this code is located in the same aspx file it works perfect ...

Utilizing Jquery for event handling in dynamically created table rows in a datatable

I am attempting to incorporate a function call "onblur" where I can input a new value in the TD cell. What I am looking to achieve is for the new value to be passed by the function to another JQuery script. Unfortunately, the datatable does not seem to rec ...

I'm struggling to grasp the concept of how the backend and frontend interact with each other

The world of web development begins with HTML, CSS, and JavaScript for the frontend. HTML is essential as it allows browsers to render content in a readable format for humans. CSS comes into play to define the style and design of websites, while JavaScript ...

Pass information from a child component to a parent component within a React.js application

Using the Semantic-UI CSS Framework, I have implemented a dropdown menu and want to be able to select an item from it and identify which item has been selected. While I can determine the selected item within the child component and set its state, I am faci ...

React - Issue with useState not displaying updated values

I am attempting to link a user-entered value to another input field that is read-only. However, the value is also showing up in other input fields. Although I can see the value on the HTML page as I type, I am struggling to connect it to the desired input. ...

What are the steps to set up rollup with Vue?

Working on a project utilizing Vue.js and bundling with Rollup. Shown below is the content of my rollup.config.js file import vue from 'rollup-plugin-vue2' import less from 'rollup-plugin-less2'; import buble from 'rollup-plugin- ...

Reset Angular form after dynamically creating input fields

Within my form, I have a dropdown that determines which custom directive is compiled into the form. This directive includes form inputs. Every time the dropdown value changes, the old compiled directive is removed and a new one is added, which is functioni ...