Image created from BitmapData stroke

Having trouble creating a sprite from BitmapData? It seems that when working with a rectangular shape, everything runs smoothly. However, when dealing with just a line, the sprite ends up empty.

bmd = this.game.add.bitmapData(this.line.width, this.line.height);

//Creating a rectangle works fine:
bmd.ctx.rect(0, 0, 32, 32);
bmd.ctx.fillStyle = "#0f0";
bmd.ctx.fill();
var platform = this.game.add.sprite(this.line.midPoint().x, this.line.midPoint().y, bmd);

//Creating a line doesn't work
bmd.ctx.this.lineWidth = "8";
bmd.ctx.strokeStyle = 'white';
bmd.ctx.moveTo(this.startPoint.x, this.startPoint.y);
bmd.ctx.lineTo(this.endPoint.x, this.endPoint.y);
bmd.ctx.stroke();
var platform = this.game.add.sprite(this.line.midPoint().x, this.line.midPoint().y, bmd);

Any known issues or am I making a major mistake in my code?

Thank you for your time

Answer №1

After some experimentation, I successfully figured out a solution.

Game.prototype.create = function(){
  this.bmd = this.game.add.bitmapData(this.game.width-20, this.game.height);
  this.bmd.ctx.beginPath();
  this.bmd.ctx.lineWidth = "4";
  this.bmd.ctx.strokeStyle = 'white';
  this.bmd.ctx.stroke();
  this.platform = this.game.add.sprite(0, 0, this.bmd);  
};

Game.prototype.draw = function(){
  this.bmd.clear();
  this.bmd.ctx.beginPath();
  this.bmd.ctx.moveTo(this.startPoint.x, this.startPoint.y);
  this.bmd.ctx.lineTo(this.endPoint.x , this.endPoint.y);
  this.bmd.ctx.lineWidth = 4;
  this.bmd.ctx.stroke(); 
  this.bmd.ctx.closePath();
  this.bmd.render();  
}

It dawned on me that I should have initially added the sprite and then simply re-rendered it when needed.

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

Initiate a click event on an anchor element with the reference of "a href"

I'm currently facing an issue with clicking a href element on my HTML website. The click event doesn't seem to be triggered. CODE: HTML CODE: <div class="button" id="info" ></div> <ul id="game-options"> <li><a ...

Losing authentication token when refreshing with Nuxt asyncData and Axios

While testing a get API that retrieves an array of mail data through Postman, everything seems to be working smoothly. However, when I implement the asyncData method to fetch the array in my code, it only works once. Upon page refresh, I encounter a 401 er ...

Guide to updating the content of an input field

As a newcomer hobbyist, I'm attempting to automate my web browsing experience. My goal is to have the browser automatically fill in my username and password, and then click the sign-in button using a combination of JavaScript and Tampermonkey. This me ...

Utilizing jQuery's slice() and remove() functions, followed by triggering jQuery's isotope to reorganize

I have been working on a project for the website My goal is to display only 25 posts and rearrange the post divs (.dcsns-li) by calling Isotope again. Here is the code I am using: jQuery(window).load(function(){ var nPosts = jQuery(".dcsns-li").length ...

What is the best way to incorporate a sliding effect into my cookie form?

I created a cookie consent form for my website and I'm looking to include a sliding effect when it first appears and when it disappears after the button is clicked. How can I implement this sliding effect into the form? Here's the HTML, CSS, and ...

Incorporating Progressive Web App Support into a JavaServer Faces Web Application

Exploring the possibility of integrating Progressive Web App support into a JavaServerFaces web application has become a focal point for our team. As our JSF app continues to evolve, we foresee the need to provide offline access to certain parts of the app ...

personalized XMLHttpRequest method open

var open = XMLHttpRequest.prototype.open; XMLHttpRequest.prototype.open = function(method, uri, async, user, pass) { this.addEventListener("readystatechange", function(event) { if(this.readyState == 4){ var self = this; var respons ...

Angular's $location is reverting back after the modification

When using Angular, I encountered an issue where the user was not redirected to the view page after submitting a form. To handle this, I attached the following function to the scope: $scope.create = function () { return $scope.customer.$save({}, funct ...

Execution priority of Javascript and PHP in various browsers

I implemented a basic JavaScript function to prevent users from using special characters in the login form on my website: $("#login_button").click(function(){ formChecker(); }); function formChecker() { var checkLogin = docum ...

Programmatically loading a URL into an ng-view component

Given the code snippet below, I am looking to dynamically load the URL for the `viewTeam` page into the `ng-view` container upon calling the `showTeam()` function. What would be the best approach to achieve this functionality? <html> <head> ...

Ensure that the Ajax calendar extender does not allow the selection of past dates

I'm currently using an ajax calendar extender along with JavaScript to prevent users from selecting past dates. However, I'm encountering a problem: When the user selects a past date, it works correctly If the user chooses a future date, it als ...

Make sure to enable contentEditable so that a <br> tag is inserted

When using a contentEditable, it automatically wraps words to create a new line once the width of the editable area is reached. While this feature is useful, I am facing an issue when parsing the content afterwards as I need it to insert a <br> tag ...

What is the best way to modify the ID of a duplicated element?

I have been working on creating a drag and drop editor using react-smooth-dnd. The setup involves two containers: a toolbar with elements and an editor where the elements can be dragged and dropped. Each element in the toolbar has the following structure: ...

Leveraging body-parser for capturing an indefinite amount of text fields in node/express

Background In pursuit of my Free Code Camp back end certification, I am embarking on the task of creating a voting application. For detailed information and user stories required for this project, visit this link: Among the user stories is the ability to ...

Adding a Fictitious Pair to a JavaScript Object Literal

When I work with object literals in JavaScript, I often encounter syntax errors when adding a new label / value pair without including the trailing comma. This can be frustrating as it's easy to forget to include the necessary delimiter. .draggable({ ...

Ways to trigger a function solely upon user input for field updates, excluding any automatic updates

In my view form.html, I have the following code: Size <select ng-model="size" ng-options...>[1..20]</select> Limiter <select ng-model="limiter">[1..20]</select> Then, in the controller form.js, I added: $scope.$watch("limiter", f ...

Is there a way to exchange the chosen options between two bootstrap-vue multiple select boxes?

Is there a way to switch the selected options between two bootstrap-vue multiple select boxes? I am trying to create a UI similar to the image shown below but I am struggling with writing the method. This is how I have written the template: https://i.sst ...

Tips for troubleshooting an Express application launched by nodemon through a Gulpfile in WebStorm 10

I have a unique Express application that is powered by a Gulpfile configuration. gulpfile.js 'use strict'; var gulp = require('gulp'); var sass = require('gulp-sass'); var prefix = require('gulp-autoprefixer'); va ...

Steps for connecting data to a react table

This is my first time working with React and I want to display the following data (id, name, status, and quantity): interface Goods { id: number; name: string; status: string; quantity?: number; } export const getGoods = (): Promise<Goods[]> ...

Efficient React search feature with pagination that avoids redundant setState calls

Currently in the process of incorporating search functionality with pagination in React. After reviewing numerous examples, it appears they all involve using setState() twice, both before and after making an AJAX call to the backend. Here is a snippet of m ...