FAQ Database Discussion Community
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,...
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 =...
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...
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:...
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">...
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....
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...
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....
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...
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.
html,html5,canvas,html5-canvas
How to show part of element outside of canvas from opposite side canvas. Illustration:
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...
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...
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.
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...
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...
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...
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...
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 *...
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...
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 =...
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....
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?...
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...
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...
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...
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...
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...
javascript,graph,html5-canvas
I am new to html5 canvas. I need to display fonticons (fontawesome) as images. Is this possible? Thanks...
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...
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;...
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);...
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...
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" >...
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? ...
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);...
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.
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 ?...
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!!...
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...
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...
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...
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...
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...
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...
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...
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,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...
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(); //...
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>...
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...
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...
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)...
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,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...
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...
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 =...
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.
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....
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...
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...
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) {...
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...
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...
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...
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,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...
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...
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...
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...
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...
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? ...
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),...
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?
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");...
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 =...
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 ||...
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 =...
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...
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...
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...
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...
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',...
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;...
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...
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...
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...
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...
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(){...}...
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...
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...
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 {...
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:...
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;...
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...
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...
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.
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>...
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...
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...