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

Tips for transferring information obtained from an API to my custom HTML page

As a novice in web development, I recently created a simple weather report website using the OpenWeather API. While I successfully fetched data from the API, I encountered an issue trying to display this data on my HTML page. Despite utilizing DOM manipu ...

javascripthtmlnode.jsapiexpress

Hover to stop menu movement

Can someone help me achieve a similar menu hover effect like this one? I'm trying to create a menu with a hold/pause effect on hover, specifically in the section titled "A programme for every vision". The goal is to navigate through the sub menus smo ...

javascriptjquerycss

Instructions on filling the star icon with color upon clicking the button

Currently working on a project using codeIgniter where I have a form for rating products. I am facing an issue where, upon clicking the star button, only the border color changes to yellow while the center of the button remains white. Can someone please g ...

javascripthtmlcsscodeigniter

The custom validation in Node.js using Express-Validator is ineffective

I have implemented custom validators using express-validator to include specific validations: middlewares.js module.exports = function (app) { console.log('making sure I am being called'); return function (request, response, next) { ...

javascriptnode.jsexpress

Button Triggering Javascript

Looking for a handy solution that allows users to either accept or reject a website's cookie policy. I came across an interesting library called cookies-EU-Banner (found at ) which seems to be quite popular. It recognizes when the user clicks on Reje ...

javascriptangularjs

Unusual behavior of the `map` function in Firefox's JavaScript

Here's an interesting observation regarding the behavior of the map function in Firefox. In a particular error scenario on a web application, when Firebug pauses at the error, entering the following code into the Firebug console: ["a", "b", "c", "d" ...

javascript

The error message "angularjs is unable to assign a value to the property 'students' as it is

After setting ClassesServices to the classes array, I tried adding students of the class to a new property called classes.students. However, I encountered an error message saying 'Cannot set property 'students' of undefined.' $scope.cl ...

javascriptangularjs

Component experiencing issues with service or @Input functionality

I have been struggling with importing a service inside a component and encountering an issue where the Input from the service does not render anything in the template. Let's take a look at my entity: export interface PageState { step: string; } e ...

javascriptangularpromise

Failed to connect to Wordpress REST API when calling it from a NextJS server due to ECONNREFUSED error

I am currently working on a basic example that involves fetching a list of page slugs from the WordPress REST API, but I am encountering some unexpected behavior. My getPageList() function is an asynchronous function that makes a simple call to the WP API ...

javascriptphpnode.jswordpressnext.js

The API response indicates that the service is currently not accessible

I'm attempting to retrieve a report from the MOZ API, but I keep receiving this response: { "status" : "503", "error_message" : "Service Temporarily Unavailable" } This is the code I am using: function MozCall(callback) { var mozCall = ' ...

javascriptnode.jsexpress

Steps for resolving the error message: "An appropriate loader is required to handle this file type, but there are no loaders currently configured to process it."

I am encountering an issue when working with next.js and trying to export a type in a file called index.ts within a third-party package. Module parse failed: Unexpected token (23:7) You may need an appropriate loader to handle this file type, current ...

javascriptreactjstypescriptnext.js

Reviewing packages often reveals a multitude of mistakes

I attempted to address some issues in my project by executing npm audit fix Unfortunately, this did not yield significant results. However, when I added the --force flag, the outcome was even worse than before: fix available via `npm audit fix` 10 vulner ...

javascriptnpmpackage-managers

Code snippet: Retrieve the previous and upcoming events based on the current date from an array (JavaScript/Angular)

Is there anyone who can assist me with an algorithm? I have a list of events and need to retrieve the next event and previous events based on the current date. For example: I fetch all events from an SQL database like so: events = [ {eventId:1, event ...

javascriptarraysangularjsalgorithmobject

What is the best way to eliminate a blank array in JavaScript?

After countless hours of searching, I am reaching out for help with an issue that has me stumped. My Node.js application relies on JSON files for project configurations. Using the 'fs' module, I read the JSON file, parse it into a JavaScript obje ...

javascriptjsonnode.js

What is the best way to pass an Id to JavaScript's getElementById when the Id from my input tag is produced by the output of PHP/MySQL?

Thank you in advance for your assistance. I am attempting to search through all the IDs listed below to determine if the user has selected any data. <input id=\"".$row['childName']."\" type=\"checkbox\" name=\"foodDa ...

javascriptphparraysgetelementbyid

Console.log is displaying array as [object Object] when utilizing Typescript

When working with an object in typescript called "obj," I encountered a strange behavior. Initially, when I ran the console.log(obj); command, the output in the terminal console was displayed as [object Object]. However, after wrapping it in JSON.stringify ...

javascriptnode.jstypescript

What is the best way to wait for a series of subscriptions to complete?

I am currently facing challenges with Observables while working on a complex REST API query function that involves intricate logic and multiple requests and responses. Although I have already written numerous functions with subscriptions like the ones bel ...

javascriptangularasynchronousrxjsobservable

How should the directory be organized for the param with a prefix in Nuxt.js?

My route is set up as /en/rent-:productSlug How should I organize the directory for this route, considering that the parameter productSlug includes the prefix rent? ...

javascriptvue.jsnuxt.js

connect the input to a factor using v-model

I currently have a value that I need the user to adjust. Here's my current setup: <input type="number" v-model="value" step="any"/> However, the internal value is in radians while I want the user to see and input a degree value. So, I want th ...

javascriptvue.js

Using percentages to position Div elements

Currently, I am working on an HTML page that requires a div element spanning the full width of the page. My goal is to arrange other divs within this full-width div using percentages rather than pixels. The class associated with this div is .question. Thi ...

javascriptcss