FAQ Database Discussion Community


ChartJS horizontal label are 1-2px clipped

javascript,html5-canvas,chartjs
I have same problem as mentioned on post: Make x label horizontal in ChartJS Note that for me interesting only question about y labels. How format or align "y" labels? ...

Loading images into html5 canvas

javascript,node.js,image,html5-canvas,sails.js
I am using nodejs sails for my app. The app is going to use 50-100 images at some points. I was wondering if someone can point pro and cons of using /assests/images/ folder vs outside repository i.e. AWS S3 for image storing and pulling to draw on the canvas.

How can i move rotated canvas image whitout disorientation?

javascript,jquery,canvas,html5-canvas,filereader
I have an image loaded into the canvas. I can't (drag) move the image properly, after it is rotated. Actually, it moves but it moves based on the image's coordinate plane. So moving a 90 degree rotated image to the right, moves down and not to the right as expected....

HTML5 canvas and javascript move player with mouse movement

javascript,html5,function,canvas,html5-canvas
okay so far i can move the player with the arrow keys but i have been trying to figure out how to move the player with mouse movements such as moving the mouse to the right will increase the players X position and moving the mouse to the left will...

ondragstart on an array of elements dynamically in javascript

javascript,html,html5,html5-canvas
I have an array of image elements, var im = ["im1","im2"]; // from db or local drive Then creating the images dynamically as: var l = imagelist.length; for (var i = 0; i < l; ++i) { if (i in im) { var s = im[i]; var img = document.createElement("img");...

How to get width & height of drawn arc(s) in HTML5 Canvas?

html5,canvas,html5-canvas,kineticjs,konvajs
Here I have drawn some arcs using Konvajs library, but I cannot get their width and height after the objects have been drawn, How can I do that? for quick read of code: function drawSurface(idnumber, radius, x, y, startAngleParam, endAngleParam) { var borderbold = 5; var surface; if (typeof startAngleParam...

how to attach a range/input slider onto a canvas animation?

javascript,html,animation,html5-canvas
I am aiming to attach a slider onto this codepen animation, so the user can edit the speed of the animation. At the moment, I am not getting any errors, but I am not getting the value from the input slider passed through to the animation. this.speed = dotSpeed; I...

Give 2d image customization to produce real view

html5-canvas
Is it possible to add image/text on the 2d image so that it gives a real view.For example as present in : http://www.zazzle.com/make_your_own_iphone_5_case-179092402149274498.

Saving image to localstorage - canvas

javascript,html5,html5-canvas
I'm using html5 storage to store my image. It works great in chrome. In FireFox it works 8/10 times. function getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0); console.log("line 1 : " + img.src); var dataURL = canvas.toDataURL('image/jpeg'); console.log("line...

How Can Inline IMG SRC data:image Be Transferred With JavaScript to PHP?

javascript,php,jquery,image,html5-canvas
Below is an element that contains inline base64 image data (abbreviated to fit here). How can JavaScript get the inline data and send it to PHP? It would be good if an intermediate canvas can be avoided, since the raw data is already available. In the page: <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEU4Xoy9WY9k6" id="photo">...

Passing a color through a variable in a canvas animation

javascript,css,html5-canvas,rgb
I am attempting to make a customisable animation on a canvas. I am trying to change the colour of the animation with the click of a button by passing through a different rgb value. At the moment I am not getting any response to the click of the button http://codepen.io/smbazalo/pen/RPrQRN...

How to show part of element from other side of canvas

html,html5,canvas,html5-canvas
How to show part of element outside of canvas from opposite side canvas. Illustration:

How to change the ball color every time it bounces off the wall?

javascript,html,css,html5-canvas
I just saw this question ball bounce while searching for some JavaScript code. Its easy code but what to do if we want to change the color randomly of the ball every time it bounces off the wall. My thoughts: Have a random color generator and use it. Something like...

Transfer only a Part of Canvas to a New Canvas

javascript,html,html5,canvas,html5-canvas
I have a canvas with an id of cnv. <canvas id='cnv'></canvas> The dark rectangle is the whole canvas. I want to create another canvas that contains only the white region in the old canvas. How will I transfer a part of a canvas to a new canvas? var cnv =...

HTML5 canvas Image issue

javascript,html5,html5-canvas
I making a game in HTML5 and this image wont draw. In the chrome js console it says there's nothing wrong with it. Declaring the image: var wall1 = new Image(); calling the onload: function render(arg1, arg2, arg3){ wall1.onload = drawwall(arg1, arg2, arg3); wall1.src = "assets/slide.jpg"; } Draw wall function:...

How do I take code from Codepen, and use it locally?

javascript,css,html5,html5-canvas
How do I take the code from codepen, and use it locally in my text-editor? http://codepen.io/mfields/pen/BhILt I am trying to have a play with this creation locally, but when I open it in chrome, I get a blank white page with nothing going on. <!DOCTYPE HTML> <html> <head> <script> src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>...

Interactive bend image

css3,graphics,html5-canvas
I'd like to transform image in web browser this way -> more precisely, it should be 3D effect (like wrap the image around can). I'm considering these options: CSS3 transform (is it possible with matrix3d somehow?) HTML5 canvas (I don't have any experience here yet) applet or flash (this would...

How to detect if mouse button is held down for a certain amount of time after click

javascript,canvas,html5-canvas
Hi I am quite new to javascript. I want to be able to fire an event when a user clicks on point in canvas(short press), and if holds that click down for 1500 ms, i should have another functionality. I should recognize the long press before the mouseup is done....

How can I animate the drawing of text on a web page?

javascript,css,canvas,html5-canvas,css-shapes
I want to have a web page which has one centered word. I want this word to be drawn with an animation, such that the page "writes" the word out the same way that we would, i.e. it starts at one point and draws lines and curves over time such...

HTML5 Canvas not Aligned

jquery,html5,html5-canvas
So, I have the following code as HTML: <canvas id='myCanvas'></canvas> <span id='coords'></span> <button class='clear'>clear</button> The CSS to go with it: #myCanvas{ width: 278px; height: 100px; border-left: 2px solid black; border-bottom: 2px solid black; } And some Javascript: var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var mouseClicked = false; function...

video texture loop in pixijs

html5,video,html5-canvas,pixi
I am able to load a video texture and render it using pixi // create an new instance of a pixi stage var stage = new PIXI.Stage(0x66FF99); // create a renderer instance var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight); // add the renderer's view element to the DOM document.body.appendChild(renderer.view); requestAnimFrame(animate); // create...

how draw in canvas read a json?

javascript,json,html5,canvas,html5-canvas
I'm trying to draw through on a HTML5 canvas. I managed to draw on the canvas but I need to do it dynamically. This is my JavaScript code: var c=document.getElementById("yellow"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.moveTo(247,373); ctx.lineTo(0,390); ctx.lineTo(5,21); ctx.lineTo(245,0); ctx.lineTo(247,373); ctx.closePath(); ctx.fillStyle="#ffca05"; ctx.globalAlpha=0.7; ctx.strokeStyle = '#ffca05'; ctx.fill(); ctx.stroke(); I need to read...

Canvas image src from hosted file

javascript,html5,canvas,html5-canvas
currently I am calling canvas source images from imgur, but I would like to host them within my app, like "images/soundwave.png"... .. given my current code, I cant figure out how to do that. If it helps at all I am using Middleman <script> var imgBg = new Image(), imgFg...

How do I calculate logrithmic labels for a VU meter scale?

javascript,html5,audio,canvas,html5-canvas
I writing a meter widget using canvas and need to calculate the label values for the scale. No problem except when I'm trying to re-create the scale for a VU meter. I understand it's logrithmic, but the values aren't powers of 10 on that type of meter. The function I...

Issues with HTML5 Audio Visualiser

javascript,html,html5,html5-canvas,html5-audio
I am experimenting with code that I found on a website. The source of it is here: http://themaninblue.com/experiment/webAudioAPI/Source.zip Now the thing is: with a local file it works fine, but when I attempt to connect to a file that is on the Internet (basically changing the src attribute from audio),...

for loop not performing with object

javascript,object,for-loop,canvas,html5-canvas
I'm using Canvas to play and learn with Javascript. Currently I'm creating a circle and have it display in random areas on the screen. I was able to complete that exercise completely; everything ran smoothly in one function. Now I would like to create an object for the circle and...

Why saving canvas as jpeg or pdf result black image?

javascript,pdf,canvas,html5-canvas
I have the following code: var imgData; var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var imageObj = new Image(); imageObj.onload = function() { context.drawImage(imageObj, 0, 0); }; imgData = canvas.toDataURL("image/jpeg", 1.0); imageObj.src = 'http://images.visitcanberra.com.au/images/canberra_hero_image.jpg'; When a user click on JPG or PDF file is downloaded. There's following code for...

Randomly appearing text in html page

javascript,html5,css3,canvas,html5-canvas
I have been putting a lot of effort into researching for a solution, but come up empty. I am trying to make 10 words of different font-sizes slide in from different directions, on a canvas within my document. I have some code (jsFiddle), but haven't managed to get too far...

Rendering concentric hexes on Canvas

javascript,html5-canvas,trigonometry,2d-games
I've written a loop in JavaScript that will render rings of concentric hexagons around a central hexagon on the HTML canvas. I start with the innermost ring, draw the hex at 3 o'clock, then continue around in a circle until all hexes are rendered. Then I move on to the...

How to pass a parameter to CanvasJS returned from XMLHttpRequest?

javascript,ajax,json,xmlhttprequest,html5-canvas
I took an example code from : http://canvasjs.com/html5-javascript-bar-chart/ ("Cost of pancake.."). When running it, it works of course. I created a small html that when entering a url, it returns me exactly the second parameter that should be passed to : var chart = new CanvasJS.Chart("chartContainer",my_parameter); code : <!DOCTYPE html>...

How do I make this animation move from right to left?

javascript,html5,animation,html5-canvas
I have been learning some JavaScript and this was one of the exercises. It works just fine, but one of the challenges was to make the animation go from right to left and I have been stuck in there for a while. I'm sure is really simple but everything I...

“Tainted canvases may not be loaded” Cross domain issue with WebGL textures

google-chrome,gwt,libgdx,html5-canvas,webgl
I've learnt a lot in the last 48 hours about cross domain policies, but apparently not enough. Following on from this question. My HTML5 game supports Facebook login. I'm trying to download profile pictures of people's friends. In the HTML5 version of my game I get the following error in...

Loading and storing svg files in fabricjs

javascript,html5-canvas,fabricjs
I have been able to put together a small test example for loading and displaying SVG files on a canvas with fabricjs. What I would like to do is store the loaded SVG in a variable so it can be added to canvas outside the scope of the loadSVGFromURL callback...

fabric.js : How to make an image in the shape of a circle with white borders

image,html5-canvas,fabricjs
I am using Fabric.js to create some animations on HTML canvas. I need to make this : If I use image element I cannot make it circular and not put white border. If I use circle object I cannot put an image in it. Any ideas will be appreciated. TIA...

How to transfer events into the canvas { pointer-events : none }; (!in KonvaJS)

javascript,html5-canvas,pointer-events,konvajs
The essence of the title is described and presented in my example. My task is to make the pseudo shape. You need to hover on the canvas element (triangle), canvas accepted property {pointer-events:all}, and the care with this element {pointer-events:none}. How this can be done using the framework konvajs. /*NON...

Display bottom canvas with a shadow effect - shadow within clipped area

javascript,canvas,html5-canvas
I`m new with canvas so thanks for your patience. I wrote an engine that is creating 2 different layers in 2 canvas elements which are one over another. They contain some generated pictures, which aren`t important here. I'm trying to create an effect which will display bottom layer when I...

Canvas image cropper - canvas.toDataURL is acting asynchronously does this return any kind of promise

javascript,html5-canvas
If I put an alert between 'toDataURL' and a canvas draw using the result then everything proceeds as expected. Does toDataURL fire an event on the canvas or should I use some kind of 'onLoad' for the image src I am setting it to? IE img.addEventListener('load',function(){...}...

Color issue rendering a Cartesian Plane

javascript,graph,html5-canvas
I want to make mid-line as red. But doing so makes all the lines red that are drawn after mid-line. Following is my JavaScript code for making a graph in html5 Canvas: var c = document.getElementById("myCanvas");// Accessing Canvas element var graph = c.getContext("2d"); var posX = 100; var posY =...

increase and decrease number of km using a filter bar by click and drag

javascript,jquery,html,html5,html5-canvas
I have the following picture: I would want to obtain the following effect: when a user drags the filter the number of km will increase or decrease according to the user and the number will be displayed in those 2 smalls textboxes. Is this achievable? ...

How export img data with javascript

javascript,html5,html5-canvas
I get the image data from canvas as follows: var img = mycanvas.toDataURL("image/png;base64;"); then i pass de image data to the href attribute of anchor $("#imagenMapa2").prop("src",img); The problem is that when i try to download the image chrome crash, I tried with other smaller canvas and that work, buth with...

Canvas element as overlay to canvas

html5,canvas,html5-canvas
TL;DR How to make canvas element with images to be overlay of second canvas with image. I have two canvas elements. First one has image of t-shirt. Second one has images which can be added manually. I want to make second one to be overlay of first canvas. js: var...

How to remove bars for those bars with zero value in Chartjs bar chart?

html5,html5-canvas,bar-chart,chartjs
Even if the bars have value of zero in bar chart created using chartjs, they still show a visible bar. This is misleading for my purpose and I would like to have it removed and show nothing there (meaning that, I still want to show labels with zero value but...

How to scale a pattern before fill in fabricjs

html5,image,image-processing,html5-canvas,fabricjs
I'm trying to fill a polygon with a pattern that is larger than the polygon itself. I want to scale down the pattern before filling the polygon with it but I can't figure out how. I can certainly resize the file pattern file before it's loaded but I was wondering...

Set custom colours for tooltip squares Chart.js

jquery,charts,html5-canvas,bar-chart,chartjs
When using Chart.js is it possible to change the colour of the squares within the tooltip that is used to respresent each bar? I've noticed that when you change the pointColor value it affects the colour of the squares but can you somehow use a different colour other than whats...

Scale Canvas Image Proportionately

javascript,jquery,html5,html5-canvas
I'm using the following code to create a canvas to which the user uploads an image and can the drag, resize and rotate the image onto a product. Sort of like a tshirt design tool. My problem is, I need to scale the image proportionately, so that when the user...

HTML5/ Javascript Canvas stamp design project

javascript,php,css3,html5-canvas
I'm working on HTML5/js Canvas project which is about Designing Online Stamps.I have to design a stamp in Circle which consists top Circular Text and Bottom Circular Text and center of them one image..(You can refer ScreenShot).for both Texts i have set 2 different Text boxes.But I'm not getting desired...

How to draw a graph using parbola equation

javascript,math,html5-canvas,quadratic-curve
I am trying to create a graph using parabola equation (y=x*x). But I am bit confused to calculate the value for control point. How should I calculate the control point value. My JavaScript function: function drawParabola() { ctx.beginPath(); for(i=-2;i<=2;i++) { //formual y= x * x; y = i * i;...

HTML5 Canvas Flip Card Animation

javascript,html5,html5-canvas,phaser-framework,turnjs
I am trying to create flip card effect using html canvas by drawing it in the canvas. no ccs3 tricks needed. It should be done in a native manner; this is my initial test using phaser.js by changing the scale <html> <head> </head> <body> <div id="game_canvas"> </div> <script src =...

Drawing arc to fit angle in html canvas by Circle tangles point with known radius 2D

javascript,html5,canvas,html5-canvas,trigonometry
It's hard to explain the problem. but I'm gonna try my best. First I make 2 lines, a line contain a start point, and a end point, like this line = { startPoint{x: , y:} endPoint{x: , y:} } And then I draw the two lines on the canvas forming...

Fill Phaser TileLayer with Data

html5,html5-canvas,webgl,phaser-framework
With Phaser there is the possibility to to create TileMaps which are pretty neat so I would love to use them. I can generate the required array of tile "data" that you would usually initiate the tilemaps with but since I generate them on the fly I can't use like...

How to make multiple balls drop on click?

javascript,canvas,javascript-events,html5-canvas
I have a ball that drops from cursor location, and redrops when the cursor is moved to another location. I am trying get a new ball to drop every time I click the mouse. I tried: canvas.addEventListener('click', function(event) { ball.draw(); }); But it doesn't seem to do anything. Is there...

Having trouble with HTML5 canvas + OOP

javascript,oop,html5-canvas
I am trying to set up a basic OOP system for a webpage I am creating, but I am having some trouble with the code below. <html> <head> <style> canvas{border:black; 1px solid;} </style> <script> function draw(){ var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var plane = function(x,y,xspeed,yspeed){ this.x =...

Detecting closed loop in a 2D array pattern

javascript,arrays,html5-canvas,phaser-framework
Let's assume that you get the following array: foo = [ [0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0], [0,0,0,1,1,1,1,1,0,0], [0,0,0,1,0,0,0,1,0,0], [0,0,0,1,0,0,0,1,0,0], [0,0,0,1,1,1,0,1,0,0], [0,0,0,0,0,1,0,1,0,0], [0,0,0,0,0,1,1,1,0,0], [0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0], ] How can I determine if the pattern of 1s is a closed loop? I have struggled with this for a few days. I have tried a recursive loop...

Fabric.js setHeight() and scaleToHeight() gives different height values

javascript,html5-canvas,fabricjs
I have an issue with image resizing. I want to resize an image but without keeping ratio. When I'm using setHeight() it gives me wrong value. image.setHeight(100); image.getHeight(); // gives me 140px output When I'm using scale function all is correct, but it keeps image ratio also image.scaleToHeight(100); image.getHeight(); //...

Draw a box around canvas getImageData

javascript,html5,canvas,html5-canvas
I'm currently working with some images in canvas, and I would like to draw a box around an image with a transparent background (see the example at the bottom) I'm getting my data through: context.getImageData(0, 0, canvas.width, canvas.height); I already got only the black (not transparent) data inside my result;...

image smaller than the original on canvas to make drawImage()

javascript,jquery,html5,canvas,html5-canvas
I am developing a system for image filter with html5 canvas, however, as I am at the beginning I have emerged me some doubts and mistakes. Here's what I've developed so far: $(document).ready(function() { $("#uploadImagem").change(function(e) { var _URL = window.URL || window.webkitURL, arquivo = e.target.files[0], tipoImagem = /image.*/, reader, imagem;...

Draw arc on canvas from two x,y points and a center x,y point

javascript,canvas,html5-canvas,automatic-ref-counting,trigonometry
i'm trying to draw a arc from two points (X, Y cords). But i can't figure out how to do it so that i can specify the start angle and end angle I got the center point(p2), radius = r. the start point(p1) and the end point(p3). like shown below...

External script not working in PaperJS v0.9.22

javascript,html5,html5-canvas,paperjs
I am new to paperJS and I'm trying to include an external paperscript file in html, but it isn't working. While the inline scripting is working fine. My code are: HTML Code: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="js/paper.js"></script> </head> <body> <script type="text/paperscript" src = "js/myScript.js" canvas = "myCanvas" >...

How to play audio on IPad using Flash CC canvas project

javascript,html5,ipad,html5-canvas,flash-cc
I'm using flash cc html5 project type. I built my project and tested on desktop and it works fine. Once test on ipad it does not play the audio. It works on android devices but not my ipad 4. I'm using Mp3 files in my flash project. I tried the...

Phaser JS + Phonegap and Ads - AdMob or iAd

cordova,html5-canvas,admob,phonegap-plugins,phaser-framework
I have spend the last 2 days trying to get Ad's working on my HTML5 Phaser JS game. Im using this plugin: https://github.com/floatinghotpot/cordova-admob-pro The plugin is installed as far as I can tell config.xml has the below: <feature name="AdMob"> <param name="ios-package" value="CDVAdMobPlugin" /> <param name="onload" value="true" /> </feature> When I...

How to know whether the mousedown event is occured on where we want in canvas?

javascript,canvas,html5-canvas
Here I have a code sample related to moving an element on canvas. To move a circle to an other position on canvas, the below code is checking whether the mousedown event got triggered on the circle element itself or not so that further dragging can be initiated using mousemove....

How can I make multiple overlaying canvases go fullscreen together and stay overlayed?

javascript,canvas,html5-canvas,fullscreen
I want to make all overlapped HTML5 canvases full-screen when a button is clicked and I want them to stay overlapped when in full-screen mode. For example I have 3 overlapped canvases. This example came from this site: HTML <section> <div id="canvasesdiv" style="position:relative;width:400px;height:300px"> <canvas id="layer1" style="z-index: 1;position:absolute;left:0px;top:0px;" height="300px" width="400"> This...

Create line in canvas word search game

canvas,html5-canvas
I created word search game in canvas. Now I want when user select character for determine word draw line for highlight that but this is my results: and I want draw line like bellow image: And this is my code for this section: function checkForWord() { // get the starting...

How do I clearRect in my JS canvas?

javascript,html5,canvas,html5-canvas
I may be having a Homer moment here but I am trying to clear the canvas at every iteration to show the square rotating but the clearRect doesn't seem to work. Can anyone see what I am doing wrong? var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var angle =...

Javascript Canvas clear/ redraw

javascript,canvas,html5-canvas
I've tried googling the answer to this but i'm just going around in circles.... If I clear the rect (using clearRect) then the image doesn't redraw after. However, if I don't clear the images just stack. What I want it to clear the current image and then draw with new...

Load image into canvas using a generic handler

javascript,image-processing,html5-canvas,generic-handler
is it possible to load an image directly into a canvas control using a generic handler without using the image element? This is my handler: public void ProcessRequest(HttpContext context) { context.Response.AddHeader("Access-Control-Allow-Origin", "*"); context.Response.ContentType = "image/jpeg"; var camIndex = Convert.ToInt16(context.Request.QueryString["camIndex"]); context.Response.BinaryWrite( Shared.Feeder[camIndex].JpegData); } My JavaScript: var xhr = new XMLHttpRequest(); xhr.open('GET',...

How to get the reference of each time drawn image in canvas?

javascript,html5,canvas,html5-canvas
I have a lot of images to draw into canvas, what I wanna do is do draw stuff one time, and handle every drawn image's visibility in order as slider. So, is there anyway to get the reference of every image, and then set property like hidden=true|false on it?...

globalcompositeoperation equivalent in webgl

html5-canvas,webgl,glteximage2d,globalcompositeoperation
Canvas 2D provides an option of overlapping images in different ways with the globalcompositeoperation property as shown here http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_globalcompop Is there an option similar to this in webgl when rendering images using the texImage2D function ?...

How to draw a animated line appearing in canvas html5?

javascript,jquery,animation,html5-canvas,draw
I´m wondering what is the right way to draw a line animation to display slowly like this effect in the opening seconds. http://dreamteam.pl/ Thanks!!...

Dimensions in html5 canvas

html5,html5-canvas,jcanvas
I have a problem with the HTML5 Canvas. I use jCanvas to add layers to an canvas but I have a problem with the sizes. I have 2 rectangles a green one and a red one. Now I want the red box touch the green left top corner. Using the...

How to find the control point of a quadratic curve using a parabola?

javascript,math,html5-canvas,bezier,quadratic-curve
I can't figure out how to draw a parabola which is having a equation as y^2 = 4ax So I have both end points i.e. P0, P2, however I can't figure out how to find control point to put in quadraticCurveTo() function....

Very basic HTML5 Canvas code failing to run. Is this me or my browser?

javascript,html,html5,canvas,html5-canvas
I am trying to learn to use HTML5 Canvas for a project, and just started using an online tutorial (a beautifully written one actually, here is the link: http://diveintohtml5.info/canvas.html). However as soon as I started to replicate it, it is not working. My browser is the latest release of Chrome,...

Nested Loop is skipped within Function

javascript,html5-canvas,nested-loops,keydown
In a basic HTML/Javascript game, when moving my character I want to adjust AI movement so their speed/position is relative to the character's, not the canvas. My code works fine but only for whichever key's function is listed last. //Left button if (37 in keysDown) { if (robot.x <= 400)...

How can i create a floor map and add some markers in html5 canvas?

javascript,html5,canvas,html5-canvas
I have an image of the floor map over which i want add some markers/pointers. I have added image in the canvas tag, but dont know how to create pointers. Thanx in advance.

Html5 canvas not sizing to fill parent div

html,css,html5,canvas,html5-canvas
I am trying to make a square canvas. I want to do this with css so that the canvas is instantly sized when the page loads. To make it square I am wrapping it in a div and styling it as follows: http://jsfiddle.net/evopgwzd/ body { background-color: blue; } #wrap {...

Returning precise vector components in js canvas

javascript,canvas,html5-canvas,trigonometry
I have been wrestling with rendering an animation that fires a projectile accurately from an "enemy" node to a "player" node in a 2D 11:11 grid (0:0 = top-left) in JS/Canvas. After a lot of reading up I've managed to get the shots close, but not quite bang on. I...

JavaScript Image only loads on refresh

javascript,html5,html5-canvas,webgl
I'm currently struggling with a very annoying problem on my game engine... I can't figure out why the images are not loading on the first time the page loads, and to make this work I have to refresh it. Here's my current code: Texture creation: /** * @param {GLContext} context...

Mask Image based on another image

canvas,html5-canvas,fabricjs
I have urls of two images(png). I need to load them and mask one image based on another. I am using fabricjs library. But I am unable to achieve the desired result so far. My question is that Is it doable using fabricjs? If yes, please point me in the...

Create a Sprite from raw RGBa data

html5,html5-canvas,easeljs,createjs,sprite-sheet
I take several snapshots from playing video on canvas and thus getting raw RGB images into memory. In the documentations its states that Sprite class accepts a Spritesheet instance only. Is there any way to create a Sprite from raw RGBa? Or maybe convert that raw data into separate Bitmap...

how to draw Highcharts in Three.js

javascript,three.js,html5-canvas
I am new to js, I want to draw 2d Highchart in Three.js on a face of the cube. I am able to draw a cube and post a image on that but however I am confused with highcharts.

Are basic HTML Canvas drawing/animation frameworks (or at least large portions of a framework), such as processing.js still necessary?

html5-canvas,processing.js
Allow me to explain, so that this doesn't just get marked as an "opinion-based" question. I'm learning processing.js right now, and I can't help but notice many of the similarities in functionality with what already exists in the Canvas API of Vanilla-JS. Perhaps writing a set of large-scale animations is...

Mouse move event if mouse down happened

javascript,jquery,canvas,html5-canvas
How I can use mouse move event when mouse down event happened and when mouse up event I don't want to use mouse move event? I want draw line on canvas in this way. Please help me?

Raycaster displays phantom perpendicular wall faces

haskell,html5-canvas,raycasting,haste
The output looks like this: You should just see a flat, continuous red wall on one side, blue wall on another, green on another, yellow on another (see the definition of the map, testMapTiles, it's just a map with four walls). Yet there are these phantom wall faces of varying...

Flipping and mirroring an image multiple times on a canvas

javascript,canvas,html5-canvas
I'm trying to make a mosaic of and images clone that is flipped and mirrored agains each other. But I can't get it to work properly. I have this JSFiddle: http://jsfiddle.net/arpo/yafLg7dc/ I want every second one flipped agains the first and so on. But when I change to values to...

Arrow shape using FabricJS

javascript,html5-canvas,fabricjs,trigonometry
I am trying to create an arrow using line and triangle shapes. You can check the demo on jsbin: http://jsbin.com/xuyere/1/edit?js,output As you can see from the demo that arrow head's position varies with angle and it's not correct. What am I doing wrong here? Here's the math I used to...

google maps scaleControlOptions changing position of scale on map

javascript,html5,google-maps,google-maps-api-3,html5-canvas
I noticed that there was no option to change the position of the scale on google maps using scaleControlOptions (correct me if I'm wrong) and was wondering if there was any way to get around that and display the scale on the bottom left position.

Flash to Html5 Canvas: slow vector graphics

flash,html5-canvas,vector-graphics,fps,createjs
I'm a Flash developer and have many games developed in the past. Now I'm going to convert them (if possible) to HTML5/CreateJS. I've used CreateJS toolkit that is built into Flash CC to convert my game. Converted game performs good on my Desktop, but unacceptable slow on any mobile device...

HTML draw arrows behind text

html5,html5-canvas,jcl
Can html5 canvas do the following? If yes, how... Be places behind bottom layer place behind HTML text Can you accurately find the coordinates specified HTML texts (perhaps identified with span ID) regardless the of browser zoom size, or line wrap I am trying to create the following with HTML/CSS/JS:...

I used a for loop to draw different curves. But how can I change every line to a different color?

javascript,colors,html5-canvas,curves
In my draw function I draw everything. I draw the white rect because you can change the position of every curve and otherwise you will see all of them. Not just the one with your new position. function draw() { var canvasWidth = canvas.width; var canvasHeight = canvas.height; ctx.fillStyle =...

Is there a way to access fonts icons from html5 canvas?

javascript,graph,html5-canvas
I am new to html5 canvas. I need to display fonticons (fontawesome) as images. Is this possible? Thanks...

Canvas - Multiple Compositing Operations

javascript,html5,canvas,html5-canvas
Is it possible to use multiple compositing for different "things" when they're being drawn? For instance I want to use lighter for specific kinds of fillRect's, but for the rest i want to keep everything as usual....

Co-ordinate math in javascript

javascript,canvas,html5-canvas
I'm working with Canvas and JS, I have a simple physics sim where a ball is added to the canvas and reacts to gravity, collisions and drag. Currently it can be fired around by dragging (like an elastic band). function drawSlingshot() { if (mouse.isDown) { ctx.beginPath(); ctx.moveTo(ball.position.x, ball.position.y); ctx.lineTo(mouse.x, mouse.y);...

HTML canvas coordinates are different when created using JS versus embed in HTML

javascript,html,html5,canvas,html5-canvas
Playing with HTML5 canvas and JS, I found a strange behaviour when a canvas is added to the HTML body directly versus creating a canvas using JS. <!DOCTYPE html> <html> <head></head> <body> <canvas id="test" width="200" height="200" style="border:1px solid #000000;"> </canvas> <script> var c=document.getElementById("test"); ctx=c.getContext("2d"); ctx.fillStyle = "#9ea7b8"; ctx.fill(); ctx.moveTo(0,0); ctx.lineTo(200,200);...

Simple canvas in angularjs directive

angularjs,html5-canvas
I'm stuck (probably on some dumb mistake) trying to make a directive work with a canvas. When I execute my code I get an element.getContext is not a functionwhich seems weird as my element is actually an HTMLCanvasElement. This is my directive .directive('pitchCanvas', function() { function link(scope, element, attrs) {...

Capture image with webRTC + canvas via jQuery

jquery,html5-canvas,webrtc
When I execute this code, I get this error message: Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap) $(document).ready(function () { window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL; navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||...

Snake Game with Mobile Button Controls

javascript,jquery,jquery-mobile,canvas,html5-canvas
In this Snake game, I need the buttons to control the snake just like the arrow keys do. This will allow the game to be played on a mobile device. You can see i have code in there for the buttons, but they are not working properly and not controlling...

How can I implement a zoom function in a 2D canvas?

javascript,canvas,html5-canvas
I'm trying to create a library for procedural textures in JavaScript and for some reason I can't really wrap my head around why my zooming function wont work. I tried lots of things but I always get funky results instead of what I originally wanted to achieve. Basically, if I...

Rotate Existing Image on Canvas

javascript,html,html5,canvas,html5-canvas
I'm attempting to rotate an image that has already been drawn on a HTML canvas, like so: var canvas = document.getElementById("editorCanvas"); var ctx = canvas.getContext("2d"); var canvasOffset = $("#editorCanvas").offset(); var offsetX = canvasOffset.left; var offsetY = canvasOffset.top; var startX; var startY; var isDown = false; var pi2 = Math.PI *...

Create a cone with shadows

javascript,canvas,html5-canvas
I would like to create a circle with a special shadow effect. Like this one: . It should look like a cone in wood or metal. I tried to do something with the radial gradiant in canvas but i can't creat that special Effekt. I don´t know how to create...

Clipping images in Webgl

html5-canvas,webgl,image-clipping
The 2-D canvas provides an api called draw image : context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); where sx is the position from where the image clipping starts . http://www.w3schools.com/tags/canvas_drawimage.asp, I am trying to use webgl to render a 2D image using texImage2D. i wanted to check if there is a way to implement clipping with...