Trouble with fill() function

Check out this JavaScript code snippet I wrote:

function Show(output, startX, startY){
    var c = document.getElementById("myCanvas");
    var context = c.getContext("2d");
        context.arc(startX, startY, 3, 0, Math.PI*2, true);
        context.fill();
        context.arc(startX + 50, startY, 3, 0, Math.PI*2, true);
        context.stroke();
}
Show(outputcpu, 50, 50);
Show(outputio, 70, 50);

I was hoping to see something like: o-o o-o.

However, what I actually get is: o-o-o-o.

Any ideas on how I can remove the center stroke? (I want the output to look like: o-o*-*o-o)

javascriptcanvashtml5-canvas

Answer №1

beginPath helps organize your calls: http://jsfiddle.net/CmuT7/1

var c = document.getElementById("myCanvas");
var context = c.getContext("2d");

function DisplayShape(output, startX, startY) {
    context.beginPath();
    context.arc(startX, startY, 3, 0, Math.PI * 2, true);
    context.fill();
    context.arc(startX + 50, startY, 3, 0, Math.PI * 2, true);
    context.stroke();

}
DisplayShape('', 50, 50);
DisplayShape('', 70, 70);

Answer №2

In order to prevent a line between the arcs, make sure to utilize either the moveTo() or beginPath() function within your code.

function DisplayShapes(output, startX, startY){
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
        ctx.arc(startX, startY, 3, 0, Math.PI*2, true);
        ctx.fill();
        ctx.moveTo(startX +50, startY);
        ctx.arc(startX + 50, startY, 3, 0, Math.PI*2, true);
        ctx.stroke();
}
DisplayShapes(outputcpu, 50, 50);
DisplayShapes(outputio, 70, 50);

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

Implementing conditional color parameter using Vuetify on an element

In my Vuetify project, I'm utilizing the built-in color parameter and predefined colors. My goal is to dynamically change the component's color based on the data it receives. For example, if complete: true, then the color should be green. Here&a ...

javascriptvue.jsvuetify.js

Issue with React component not updating content after state changes in Next.js framework

Currently, I am facing an issue with my Header component not updating its content on state change. The goal is to show the user's Profile once the state changes, but unfortunately, it does not update immediately; it only changes after a page refresh o ...

javascriptreactjsreact-hooksnext.jsstate

"Interactive Connect 4 Game in Javascript - Drop the disk into the bottom row of the chosen

Check out this awesome Connect4 game I found: http://codepen.io/anon/pen/lmFJf I have a specific goal in mind for the game. When I click on an empty space in any column, I want it to automatically drop into the lowest available spot in that column, follow ...

javascripthtmlcss

What is the best way to extend a class in NestJS from another class?

I've encountered an issue while attempting to extend a class service from another class service in NestJS and utilize DI to load it in a third service. The error message I'm receiving from Nest is: Error: Nest can't resolve dependencies of ...

javascriptangulardependency-injectionnestjs

Obtain scope in AngularJS using object ID

Is it possible to retrieve the specific scope of an object by accessing it through an ID? I am currently using angular ui tree for a navigation menu. However, I face an issue where after adding a subitem and saving the navigation into a mysql database, th ...

javascriptmysqlangularjs

JavaScript and PHP are successfully displaying a success message despite the data not being saved to the database

I recently added a new feature to my website where users can submit a form using Javascript without having to reload or refresh the page. This allows for a seamless experience and displays success messages instantly. However, being a newcomer to Javascript ...

javascriptphpajax

When attempting to use Arabic characters in my PDF file with LIP, I encounter an error: "TypeError: font must be of type PDFFont or n, but was actually of type NaN"

all I am facing an issue with Arabic characters when trying to use different fonts in my project. I have attempted to encode the Arabic letters using various npm packages, but I keep receiving a TypeError: font must be of type PDFFont or n but was actuall ...

javascriptnode.js

Removing classes from multiple elements on hover and click in Vue 2

Can Vue be used to remove a class from an element? I am looking to remove the class when hovering over the element, and then add it back once the mouse is no longer on the text. Additionally, I want the class to be removed when the element is clicked. He ...

javascriptvue.jsvuejs2

Struggling to get the angular application to function properly within the meteor templates

Having trouble integrating an Angular app into Meteor templates Below is my index.html code snippet: <body> </body> <template name="myIndex"> <section ng-app="myApp" ng-controller="AppController as app"> <div ng-in ...

javascriptangularjsmeteoriron-routerangular-meteor

Passing an array list back to the parent component in ag-grid(Vue) - A step-by-step guide

Currently, I am integrating AG Grid with Vue. My project has a specific requirement where two checkboxes are displayed using a cellRendererFramework. However, I am facing difficulties in fetching the values of these checkboxes from the row definitions. The ...

javascriptvue.jsag-grid-vue

Having difficulty locating the login button on the webpage

I am attempting to log into a banking account using selenuim. After opening the webpage and locating the login element, I initially struggled to access it by its "name" or "id." Fortunately, I was able to successfully access it using driver.find_element_by ...

javascriptpythonhtmlseleniumauthentication

Showing particular URL text upon opening a new window using JavaScript

I've encountered an intriguing scenario. In my application, there's a feature that triggers a new window/tab to open when a button is clicked. Upon opening, a predefined HTML page is shown to the user with a specific URL set. I'm curious abo ...

javascriptangular

Issue with setState not being triggered within axios POST request error handling block

I am in the process of setting up an error handler for a React Component called SignupForm.js, which is responsible for handling user registrations. Specifically, I am working on implementing a handler to deal with cases where a user tries to sign up with ...

javascriptreactjsaxiossetstate

transferring information from the Quill text editor to the Node.js server

Is there a way to send data from Quilljs on the frontend to node.js on the backend? I've been searching for examples, but haven't found anything related to the backend. I tried reading the documentation for Quilljs, but I'm still struggling ...

javascriptnode.jsexpresswysiwygquill

Having trouble with Ajax and facebox integration issues?

My website utilizes ajax jquery and facebox for interactive features. You can check out a demo here. The div with the ID "#content" contains links to other pages that open successfully using facebox. However, when I reload the content of this div using aj ...

javascriptjqueryajaxlightboxfacebox

Is it possible to prevent users from clicking on a jQuery UI Datepicker?

Is it possible to disable the functionality of a jQuery UI Datepicker so that clicking on it does nothing but display the date? I attempted: $("#calendar").datepicker({ disabled: true, altField: '#note_date', maxDate: 0 }); Unfortu ...

javascriptjqueryjquery-uidatepickeruidatepicker

Preventing the use of double-click on Grooveshark

I am currently in the process of creating a webpage to serve as a jukebox for parties. My goal is to have the page load Grooveshark with a transparent overlay (or any other necessary method) that can prevent users from forcefully adding their song to the f ...

javascripthtmloverlay

Struggling to store information in a MongoDB database within my MEAN Stack project

After successfully creating a collection for user LOGIN/LOGOUT and managing to store and retrieve data using Express app and mongoose, I encountered an issue when trying to create another collection. Despite successfully creating the collection, the data w ...

javascriptangularmongodbexpressmean-stack

Retrieving a specific variable from a cookie value that is stored within a JSON array

Is there a way to pass a single variable from a JSON array stored in the qookie file value to JavaScript? The qookie code looks like this: <?php $cookie_key = 'count'; CookieManager::store($cookie_key, json_encode(array( 'SameSite&ap ...

javascriptarraysjsoncookies

Failure to display updated property value

After rendering an array of objects, I am attempting to add a new property using a function. However, the new property value is not displaying on the page even though it is present when I log the object in the console. The new property that I want to add ...

javascriptreactjs