So I am building an AngularJs chart that utilizes an Angular Library to create the chart on a Canvas tag. However when I drag and drop a new data set onto the canvas to redraw it continues to hold the old data. What I am trying to accomplish is If (there is new data){ clear the canvas}. I know I have to use:
canvasReset.clearRect(0, 0, canvas.width, canvas.height);
somewhere but what I am really looking for is an event handler to use to assist me in determining if anything is on the canvas, and if so clearing it. However, I am not looking for mouseover mouse-click,etc. But something that is just generally looking to see if the canvas is being utilized.
The short answer, you can't. But you can catch mouseevnets, or you can wrap canvas ctx drawing functions,like
var fill = ctx.fill;
ctx.fill = function(){
fill.apply(this, arguments);
setDirty();
};
Related
My image sprite (game.player_booba) doesn't appear and I do not understand why. In spite of the modification of its position in x and in y it does not appear.
game.player_booba.init();
game.player_booba.sprite.image.addEventListener("load", (event) => {
window.requestAnimationFrame(game.loop);
});
My codePen:
https://codepen.io/manonragnotti/pen/abbeEKO
Thanks
To be honest I do not see how this question is even related to PIXI. You've included it to your codePen project but you never actually used the library. All the rendering is done directly using the native 2d canvas api. And the reason why the character sprite is not drawn on the screen is because is drawn on a canvas, which is never added to the DOM. See on this line
buffer = document.createElement("canvas").getContext("2d");
you are creating a canvas element and then assign its 2d context to the variable "buffer", but the DOM element is never actually added to the document. So you need to do something like this:
bufferCanvas = document.createElement("canvas");
buffer = bufferCanvas.getContext("2d");
window.document.body.appendChild(bufferCanvas);
I'm trying to develop a JavaScript application for modulating house plans with jsketcher. You can view project here. For modulating plans, I need to load the plan on the canvas, then try to modulate with the tools present in the jsketcher2D. I've manged to load the plan but couldn't find a way to keep it below the other elements of the canvas. I need the elements which are drawn with jsketcher2D to be on top of the plan image. Could you please help me with this?
Thank you very much
modifications made to static/sketcher.bundle.js
Line 49532
function addPlan(){
let canvas = document.getElementById('viewer');
let plan = canvas.getContext("2d")
let base_image = new Image();
base_image.src = 'img/back.png';
plan.drawImage(base_image, 0, 0);
}
Line 47461
addPlan();
You need to show more code. The most likely reason this is happening is you have your addPlan() function running after you draw on the canvas. The first things drawn will be on the back of the canvas and the last things drawn will be above.
addPlan(); // Background
canvasContext.fillRect(0, 0, 50, 50); // will be on top of image
I have seen several solutions on this issue but have not found one yet that works for my situation.
I have a chart being made with chart.js which uses canvas to display. I have a function that is supposed to clear the canvas so that I can then redraw the chart with different x variables. The function works initially but as soon as I start to hover on my cleared canvas the old contents reappear. More specifically it seems to reappear if I am hovering over on of the previous data points.
Here is the function:
function empty(){
canvas = document.getElementById("loansChart");
const context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
}
EDIT
If a canvas contained items that had hover initiated function items, do those items still exist (just invisible) in the canvas?
You should use the chart.js functions for updating and clearing charts rather than the ones for the html canvas.
The docs are quite straightforward. https://www.chartjs.org/docs/latest/developers/updates.html
I'm two days into js,html and css programming. So very newbie!
Following and building upon this TUTORIAL
Q1: How can I add this male into the background (see figuere 1.) and prohibit any strokes outside of the borders?
Adding image to background was no biggy!
function make_base()
{
base_image = new Image();
base_image.src = 'img/bmapFront.gif';
base_image.onload = function(){
context.drawImage(base_image, 0,0);
}
}
There is a context.clip function, not sure if I can use pixel form as clipping path. Making tons of "image substractions" isn't the best way.
Any suggestions
Edit:
Did the Job for me: VeryHelpful
var frontPath = new Path2D ("M 133.41,17.00 C 141.37,2.41 160.66, !VERY LONG! ")
context.clip(frontPath);
Messy strokes!
He should look like this. Then I want to save him.
Although there is such a thing as ctx.clip(), this is sometimes not what's wanted as it's impractical to use a path.
The solution that I like involves creating a virtual empty canvas onto which you draw your pixel image. Through various manipulations, like using ctx.getImageData and similar to make sure you only get one kind of color or apply other filters only once, you can obtain an image that seems to be empty (alpha of 0, mostly) in the places where you want to clip other images or paths out.
At that point, you'd use ctx.globalCompositeOperation = 'source-atop', or pick another one you might want to use from mdn's list of globalCompositeOperations.
At this point, you can just draw this virtual canvas image onto the main canvas
I have a canvas that I'm creating with KineticJS and I am adding transparent PNG images to that canvas. When stacked on top of each other, this makes one image of an outfit with all the different parts.
What I then want to do is allow the user to click on a pattern and then change a specific piece of that outfit with that pattern. So I need to fill in the non-transparent parts of one of the images with that pattern. I found a way to do this that didn't use KineticJS and it looks something like this:
ctx.globalCompositeOperation = 'source-in';
var ptrn = ctx.createPattern(fabricA, 'repeat');
ctx.fillStyle = ptrn;
ctx.fillRect(0, 0, 375, 260);
My question is, is there a way to do the same steps outlined above with KineticJS?
Also, I did first try to just do this without using KineticJS, but when I applied the above code to the layer, it filled in all of the images because they were all on the same layer. So I'm guessing that I will need to change my code to either use multiple layers or to add the images to groups in a single layer. Is my thinking right here? And which would be the better option for what I'm trying to accomplish? Multiple Layers? Or Multiple Groups on a single Layer?
Thanks for any help that anyone can provide.
If you want to do custom drawing then use the KineticJS Shape Object
This is a KineticJS object that lets you control exactly how it's drawn.
You create your overlays using your compositing method. Then put that drawing code in a function and give that function to Kinetic Shape's drawFunc.
Here's a skeleton of Kinetic.Shape:
var outfit1 = new Kinetic.Shape({
drawFunc: function(canvas) {
// you are passed a canvas to draw your custom shape on
// so new-up a context and get drawing!
var context = canvas.getContext();
context.beginPath();
// Draw stuff--including your composited overlays
// You can use any canvas.context drawing commands
},
id:"myCustomOutfit"
});
You can get started with an example here: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shape-tutorial/