I want to create a Welcome Page with a responsive background like this fiddle
https://codepen.io/JulianLaval/pen/KpLXOO/.
I tried using
var ctx = canvasDiv.getContext("2d");
ctx.fillStyle = "RGBA(255, 255, 255, 0.8)";
ctx.fillText("Hi", canvasDiv.width / 2, canvasDiv.height / 2);
But it is not working.
Any help?
The problem is that you can not simply reuse the canvas of the particle library - at least not without modifications to the particle library itself.
This library has it's own update() function which we can see at this github link: ParticleNetwork.prototype.update
So initially it clears it's canvas, draws the particles and finally schedules a call to itself - so it constantly repaints the canvas with the displays refresh rate.
No here's the problem - if you simply draw something to it's canvas it will ultimately be overwritten by this update function.
If you want to draw text on it's canvas, you have to do it inside this function.
For example, find these lines of code:
if (this.options.velocity !== 0) {
requestAnimationFrame(this.update.bind(this));
}
if you add the following lines before:
this.ctx.fillStyle = "RGBA(255, 255, 255, 0.8)";
this.ctx.fillText("Hi", this.canvas.width / 2, this.canvas.height / 2);
You will have your desired text.
Related
I am creating a gaming application . I have to constantly update the background usig
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, width, height);
But I want to have moving film in background like landscapes mountains , roads , trees passing by ) . How Should I achieve this ?
I suggest you have a video running in the background layer ( refer to video element of html5) and then use the destination-out and source-over property in your canvas . Find code below
// Fill canvas using 'destination-out' and alpha at 0.05
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = "rgba(255, 255, 255, 0.05)";
ctx.beginPath();
ctx.fillRect(0, 0,W,H);
ctx.fill();
// Set the default mode.
ctx.globalCompositeOperation = 'source-over';
This way your background will be running independent of the game . Ofcourse you can pause and resume it using eventlistners etc in javascript
I am drawing a full-window graph with the HTML5 canvas feature, and what I want to do is to define a small square of region inside this canvas, and snapshot that the part of region into certain format, like png, jpg or a base64 text.
First, create a new canvas in background with the width and height of the image you want to take:
var bgCanvas = document.createElement('canvas');
bgCanvas.width = 200;
bgCanvas.height = 150;
Then copy a part of the original canvas to the background canvas using context.drawImage. This example copies the 200x150 section starting at 400:500.
var bgContext = bgCanvas.getContext('2d');
bgContext.drawImage(mainCanvas, // source
400, 500, // source coordinates
200, 150, // source dimension
0, 0, // target coordinates
200, 150); // target dimensions
Now you just have to get the base64-encoded version of the bgCanvas as already explained in question "Getting binary (base64) data from HTML5 Canvas (readAsBinaryString)".
I'm trying to use a canvas image as background here: http://www.cphrecmedia.dk/musikdk/stage/prelisten.php
The code is as below:
window.onload=function(){
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
stackBoxBlurImage('coverbgblur', 'canvas', 19, false, 2);
}
Beside the layout stuff that needs to be fixed, I need to darken the image a little bit, so the text will always be visible, also if I use a white album-cover. Can I somehow in the code above add a line or 2 that will darken the image? I know I can use CSS3, but its seems unsmart to create an extra layer of processing instead of doing it right the first time.
I'm quite new with canvas, so every kind of help is hugely appreciated!
You can make the canvas appear darker by drawing a semi-transparent dark rectangle over the image when after you draw the image
context.fillStyle = "rgba(0, 0, 0, 0.4)";
context.fillRect(0, 0, 700, 500);
Here is an example jsFiddle
You may also be able to use context.globalAlpha or context.globalCompositeOperation = "lighter"; as described in this SO post
Hi i am building a windows store app with html5 and javascript in my app i am trying to implement an eraser tool but this is problematic because if the user moves an image or another layer to where they've previously erased, they see the white drawing where they erased.
i have been trying to do the eraser tool from different ways for example i have changed the default globalCompositeOperation to "destination-out" like this code
//Here is the error.
if (clickTool[j] == "eraser") {
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = 'rgba(255,0,0,0.5);';
ctx.strokeStyle = 'rgba(255,0,0,0.5);';
}
else {
ctx.globalCompositeOperation = "source-over";
ctx.strokeStyle = clickColor[j];
}
but unfortunately it doesn´t work for me. i have uploaded all my code to this link:
My code
Please i would like to somebody could help me.
Thanks and i'm sorry for my speech , i'm mexican.
Use multiple layers. Have one canvas for the background image and another for the drawing; that why you never erase any of the background image.
If you need to, you can have multiple layers as they don't generally impact performance.
And of course if you can combine layers, say the last drawn squiggle to the background layer, if you deem a drawing to be "permanent".
Maintain a array of mid points. Use the globalCompositeOperation as 'destination-out' first and 'source-over' later to make a transparent eraser trail .
Following is the code that you need to use with a mouse move function
var handleMouseMove = function (event) {
midPt = new createjs.Point(oldPt.x + stage.mouseX>>1, oldPt.y+stage.mouseY>>1);
if(curTool.type=="eraser"){
var tempcanvas = document.getElementById('drawcanvas');
var tempctx=tempcanvas.getContext("2d");
tempctx.beginPath();
tempctx.globalCompositeOperation = "destination-out";
tempctx.arc(midPt.x, midPt.y, 20, 0, Math.PI * 2, false);
tempctx.fill();
tempctx.closePath();
tempctx.globalCompositeOperation = "source-over";
drawingCanvas.graphics.clear();
// keep updating the array for points
arrMidPtx.push(midPt.x);
arrMidPty.push(midPt.y);
stage.addChild(drawingCanvas);
stage.update();
}
};
I use this code to make a eraser that behaves like pen and fills up transparent color instead of white
Wondering why the scale parameter of the variable ´ell´ is applying to the next two circles I have created as well:
var ell=canvas.getContext("2d")
ell.beginPath()
ell.lineWidth=2
ell.fillStyle="#FFFFFF"
ell.strokeStyle="#000000"
ell.scale(1.2,0.5)
ell.arc(125,190,30,0,2*Math.PI,false)
ell.fill()
ell.stroke()
var circ=canvas.getContext("2d")
circ.beginPath()
circ.lineWidth=1
circ.fillStyle="#FFFFFF"
circ.strokeStyle="#000000"
circ.arc(150,95,15,0,2*Math.PI,false)
circ.fill()
circ.stroke()
var circ2=canvas.getContext("2d")
circ2.beginPath()
circ2.fillStyle="#1d1d1d"
circ2.arc(155,90,4,0,2*Math.PI,false)
circ2.fill()
It's supposed to be an eyeball, the first shape is an oval and the next two are supposed to be circles, however they are getting squished by the scale command, and their positions are thrown off as well.
Any help appreciated, thanks!!
You could either use setTransform and reset the scale manualy or
call save() before applying the scale and call restore() when your done with it.
var ctx=canvas.getContext("2d")
ctx.save(); // save the context state
ctx.beginPath();
ctx.lineWidth=2;
ctx.fillStyle="#FFFFFF";
ctx.strokeStyle="#000000";
ctx.scale(1.2,0.5);
ctx.arc(125,190,30,0,2*Math.PI,false);
ctx.fill();
ctx.stroke();
ctx.restore(); // restore the state to the last save()
// you can reuse the same context
ctx.save();
ctx.beginPath();
draw the second circle...
take a look at
https://developer.mozilla.org/en/Canvas_tutorial/Transformations