How to Programming with Canvas

Thank you, K3N! By only calling generateRGBKs once and adding a callback to its imgComp, the issue was resolved. function loadFontColours() { console.log("loading font colours"); console.log(font); var start = new Date().getTime(); var rgbks = generateRGBKs(font, function() { colourLookupTable[0].fontBuf = generateTintImage(rgbks, font, 240, 240, 240); colourLookupTable[1].fontBuf = generateTintImage(rgbks, font, 242, 178,...

Canvas - Rotate line

javascript,html,button,canvas,htmlbutton

You can use transformations to rotate a line or any shape drawn to canvas. To rotate: Translate to pivot point, ie. point of rotation Apply rotation transform Translate back Draw shape In your case, if we say rotate around the middle of the line: var cd; var ctx2; var startPoint;...

How can I make a button who draws a line

This is how I did it - https://jsfiddle.net/jadeallencook/wnhmgya7/ HTML <center> <div id="myLine"></div> <br /> <button id="myButton"> Draw Line </button> </center> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> CSS #myLine { height: 1px; width: 0px; background: black; margin-top: 25px; } .animate { -webkit-animation: myfirst 5s; animation: myfirst 5s; } @keyframes myfirst { 0% {width: 0px;} 100%...

Javascript Canvas, can't draw multiple images

javascript,canvas,javascript-events,html5-canvas

The reason for only seeing 1 enemy is becuase you're using the wrong variable to the x and y coordinates. You were using the variable enemy that you used to make the enemies. Change the last row in your moveEnemy function from images.enemy.draw(CONTEXT, enemy.posX, enemy.posY); to images.enemy.draw(CONTEXT, myEnemy.posX, myEnemy.posY); ...

How to make multiple balls drop on click?

Just rewrite the ball object so it becomes instantiate-able: function Ball(W, H) { this.x = W; this.y = H; this.radius = 15; this.color = "blue"; this.vx = 0; this.vy = 1; } Move the methods to prototypes (this will make them shareable across instances). In addition, add an update method...

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

An explanation of what your code is testing. This part of your code... ((dx * dx) + (dy * dy) < circleRadius * circleRadius) ...uses the Pythagorean Theorem to mathematically test if the mouse is inside the circumference of a circle. (dx * dx) + (dy * dy) measures the...

Creating a click event in Javascript Canvas

javascript,android,cordova,canvas,fabricjs

You can have your canvas listen for mouse clicks on itself like this: // get a reference to the canvas element var canvas=document.getElementById('ctx'); // tell canvas to listen for clicks and call "handleMouseClick" canvas.onclick=handleMouseClick; In the click handler, you'll need to know the position of your canvas relative to the...

How to map tapped event for a single object in a canvas control in XAML?

c#,xaml,canvas,foreach

I think you should try something like this: foreach (UIElement ball in playArea.Children) { if(ball is ContentControl) ball.Tapped += ball_Tapped; } } void ball_Tapped(object sender, TappedRoutedEventArgs e) { ContentControl ball = sender as ContentControl; double top = Canvas.GetTop(ball); animateBall(ball, top, playArea.ActualHeight, "(Canvas.Top)"); } ...

fabric.js resize canvas to fit screen

1. Use css to set your right resolution for canvas: var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d"); canvas.width = 800; canvas.height = 600; css: /* media query 1 */ #canvas{ width: 400px; height: 250px; } /* media query 2 */ #canvas{ width: 200px; height: 120px; } pros: All the resolution...

JavaFX 8 Canvas Fonts always Bold

canvas,fonts,javafx-8

I am going to answer my own question. Instead of using: strokeText() in the GraphicsContext, I should use:fillText(). If I do that it works fine....

How can i make my HTML canvas dots move more naturally?

javascript,html,canvas

You can do this by: Generating a cardinal spline based on random line points Walk along that line and plot a star on current position Why cardinal spline? A cardinal spline will generate a smooth line between a set of points. If also has a tension value. By exaggerating the...

DrawImage is not drawing in a canvas

javascript,html5,canvas,drawimage

In your function function loadImg() { var loadTile = new Image(); loadTile.src = 'Top/x+y+/' + tileToLoad + ".png"; loadTile.onload = function() { ctx.drawImage(loadTile, tileToLoadX, tileToLoadY); }; console.log("Successfully loaded tile " + tileToLoad); }; The variables tileToLoad, tileToLoadX and tileToLoadY belong to the function imageSearch() as local variables and would be...

Why WebGL slower than Canvas?

javascript,html5,canvas,webgl

The short answer is that webgl/opengl is not meant for drawing a SINGLE quad at a time. GPUs are designed to be massively parallel and thus to gain the most out of webgl you have to draw in batches. You should be comparing drawing 10k images in canvas versus drawing...

HTML Canvas Width

So it take some delay to resize image? So don't init it when canvas not resize yet. canvas.width = width; canvas.height = height; canvas.style.backgroundImage = "...." Hope this help....

Resize function canvas loaded on shrinked browser and expanded

canvas,svg,javafx,graphicscontext

You just need to change the canvas to c in the event listener; http://jsbin.com/zigoto/1/edit?js,output var c = document.getElementById('c'), largeHeader = document.getElementById('h'); var w = c.width = window.innerWidth, h = c.height = window.innerHeight, ctx = c.getContext('2d'), spawnProb = 1, numberOfMoves = [8, 16], //[min, max] distance = [50, 200], attenuator =...

JavaFX: How to use the GraphicsContext method appendSVGPath(String svgpath)

Canvas isn't like the scene graph, stroking and filling paths does not happen automatically. Instead you need to feed your path segments to the canvas, then explicitly call fill() or stroke() to have those operations applied. For more information, see the "path rendering" section at the front of the GraphicsContext...

HTML5: Center text within rectangle

This works (fiddle): var rects = [ [a, 20, w, h, 'Day of the week'], [a, 130, w, h, 'Final'], [a, 240, w, h, 'Direction'], [a, 350, w, h, 'GoSS'], [a, 460, w, h, 'Cyber'], [a, 570, w, h, 'Ultumate77'], [a, 680, w, h, 'Ami'], [a, 790, w, h, 'TestFasePartTwo'],...

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

javascript,jquery,html5,canvas

In your inner for-loop the code should be: var curIndex = y * ctx.canvas.width * 4 + x * 4; var targetIndex = Math.floor(y / zoomFactor) * ctx.canvas.width * 4 + Math.floor(x / zoomFactor) * 4; You should take the RGBA into account in the factor 4, and also the...

How to select particular area in canvas? [closed]

You can define the area you want to fill using an image mask that fits on top of your image - this step is something for Photoshop/GIMP. For example, having your shoe as-is: Create a mask for it leaving the heal in the original position (it makes it easier to...

Draw triangle by the intersect of 3 circles

javascript,canvas,draw

Finding the intersection points which are on the circumference of all three circles Here's how to do it: Define 3 circles: var A={x:0,y:0,r:200,color:"rgba(52, 152, 219,0.5)"}; var B={x:0,y:400,r:250,color:"rgba(46, 204, 113,0.5)"}; var C={x:300,y:200,r:280,color:"rgba(241, 196, 15,0.5)"}; Calculate the intersection points of the 3 circles vs each other (AB,BC,CA): var intersections=[]; var AB=circleIntersections(A,B); //...

AngularJS - ReferenceError: $ is not defined

javascript,angularjs,canvas,reference

try this: var fbcanvas = document.getElementById('fbcanvas'); instead of: var fbcanvas = $('#fbcanvas'); check if data is undefined too...

Redraw text over clearRect HTML5 Canvas

jquery,html5,canvas

One possible solution is that you move all your clearRect()'s out from the else-statements to the top and clear it from the start. Then you add text in a second step. That way you can also group the if-statements together to form a if-else if relationship (crappy explanation, just look...

Easeljs snap to grid

javascript,canvas,drag-and-drop,easeljs,createjs

This is pretty straightforward: Loop over each point, and get the distance to the mouse If the item is closer than the others, set the object to its position Otherwise snap to the mouse instead Here is a quick sample with the latest EaselJS: http://jsfiddle.net/lannymcnie/qk1gs3xt/ The distance check looks like...

Drawing rectangles on android canvas

android,canvas

Assuming that you only want this to be for this specific pattern and not expandable then the following should work. Though it is unlikely that it will look right because it is unlikely that a screen will be 1:2 aspect ratio, so you might need to make your canvas a...

JavaScript objects: 'addEventListener is not a function'

javascript,html,object,canvas,mapping

Your specific error: 'Uncaught TypeError: elements[i].addEventListener is not a function' is because elements[i].addEventListener is undefined and thus is not a function. The reason it is undefined is because your elements array contains regular Javascript objects. Those objects do not have a .addEventListener() method. That is a method on DOM objects...

How can I make different shapes of a canvas draggable and particular area of it droppable in the same canvas

javascript,canvas,drag-and-drop

Drag and drop in specifik area UPDATE: Copy of box remains at original position while it's being moved. First you need to be able to detect your rectangles. You do this by making then into objects in your code: function box(x,y,w,h,rgb) { this.x = x, this.y = y; this.xS =...

Highchart Polar chart multiple background colors to SVG

javascript,jquery,canvas,svg,highcharts

The problem is you that created backgrounds are not part of the chart. In fact, add them in the chart.events.load event, and will be included in the exported SVG: http://jsfiddle.net/9eqh0xrj/5/ chart: { polar: true, renderTo: 'container', events: { load: modelMe } }, And example for function: function modelMe() { var...

Android canvas. contains(x, y) for an oval?

android,canvas

The following method check whether the point is in the oval or not. public boolean pointInEllipse(Point test, Point center, int width, int height) { int dx = test.x - center.x; int dy = test.y - center.y; return (dx * dx) / (width * width) + (dy * dy) / (height...

Controlling canvas object with range slider

javascript,canvas,slider

The reason you're getting the error about the [object HTMLInputElement] is that you try to write the variable cx or cy while they're both DOM objects (your sliders). If you want to write the values they represent, you should ask for cx.value and cy.value respectivelly. Furthermore, you seem to have...

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

javascript,canvas,html5-canvas,fullscreen

You will have to request the fullscreen from the parent div and set canvas elements' width to 100% in CSS : Style : div:-webkit-full-screen>canvas { width: 100% !important; } div:-moz-full-screen>canvas { width: 100% !important; } div:-ms-fullscreen>canvas { width: 100% !important; } div:fullscreen>canvas { width: 100% !important; } Js : function...

After drawing Stroke on Canvas, adding a stroke to another object changes all the strokes

javascript,canvas,bezier,quadratic

You have used two different ways to set the lineWidth: lineWidth and strokeWidth. Your problem is solved by adding a row in your function CanvasState.prototype.drawGridLines. Here's a snapshot of the code: CanvasState.prototype.drawGridLines = function (lineOptions, labelOptions) { var iWidth = this.width; var iHeight = this.height; var ctx = this.ctx; ctx.lineWidth...

Sun Arc Path in Javascript

javascript,math,canvas

The error is due to sinus being used for both x and y. As canvas is oriented with 0° heading right it should be: sun.x = 400 * Math.cos(angle * (Math.PI/180)); // cos for x sun.y = 100 * Math.sin(angle * (Math.PI/180)); Note that 400,100 are radius here so to...

Calculating a concentric arc in canvas

The question as it stands is a bit unclear about requirements. Here is in any case an approach that does not require much calculations, but takes advantage of draw operations to visualize about the same as shown in the codepen. The main steps are: At an off-screen canvas: Define a...

Aligning StackPanel to top-center in Canvas

c#,wpf,xaml,canvas

If you don't want any input or hit testing on a certain element you should set the IsHitTestVisible property to false: <Grid> <Canvas Name="Canvas" Background="#EFECCA"> <DockPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Width="{Binding ActualWidth, ElementName=Canvas}" Height="{Binding ActualHeight, ElementName=Canvas}" MouseLeftButtonDown="DockPanel_MouseLeftButtonDown" TouchDown="DockPanel_TouchDown" Panel.ZIndex="2" Background="Transparent"> </DockPanel> <Button Width="50" Height="50"...

Create a picture frame type border

html,css,canvas,svg,css-shapes

If you don't have to support IE8 and less, you can use one pseudo-element and background-image to achieve the frame effect and also have it responsive with minimal code. The inner box is generated using the pseudo element and the angled parts on all sides are achieved using angled linear-gradient...

Rotating charts in Chart JS

javascript,canvas,charts,rotation

There's no way to rotate the chartJS but not rotate the tips :-\ On the bright side, it's easy enough to code yourself from previous Stackoverflow posts! A polar chart is a set of concentric wedges as shown in this Stackoverflow post: Creating Polar Area Chart using Canvas Tooltips are...

Html5 canvas animation. How to reset rectangle when it hits the end

javascript,canvas,radians

Using your variables y, you can simply check if it is below the height of the canvas height. if( y > c.height ){ // use the canvas height, not the context height y = 0; } Also, the way you're currently calling the timer is a bit inefficient. Instead of...

How to alter a degree value into an actual x/y position change?

Yes, all angles in JavaScript are in radians. In addition, the canvas context has 0° point to the right so you need to subtract 90° from all angles if you want 0° to be straight up: var angle = (movement.degrees - 90) / 180 * Math.PI; // compensate angle -90°,...

I'm trying to call a method in a constructer every second for 15 seconds but setInterval doesn't seem to work

javascript,html5,audio,canvas,html5-canvas

You need to pass a bound reference to bob.update var intervalID = setInterval(bob.update.bind(bob), 1000); ...

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

I suppose you have a value-to pixel function. What you need to write is the inverse function of that. When you have the inverse function, you just divide the screen area to N equal parts (in the picture you have 6 regions). One region will be X pixels in width....

Circle div in CSS doesn't show in canvas properly

javascript,css,canvas,html2canvas

The border-radius must be the half of the width/height. So setting it to 10px – or even better 50% will render a smooth circle: div { width: 20px; height: 20px; border-radius: 50%; background: red; } http://jsfiddle.net/hmjqLz3p/...

Determine shape drawn on canvas from stored coordinates in an array

Heres how i solved my problem finally :) var newLine = new myLine(startX, startY, endX, endY,type); myLines.push(newLine); function myLine(xStart, yStart, xEnd, yEnd,type) { this.xS = xStart; this.yS = yStart; this.xE = xEnd; this.yE = yEnd; this.type=type } And then looped through the array for (i = 0; i < myLines.length;...

Displaying tooltips on mouse hover on shapes/position(coordinates) on canvas

html5,canvas,tooltip

You can test if the mouse is over one of your circular hot-spots like this: var hotspots=[ {x:100,y:100,radius:20,tip:'You are over 100,100'}, {x:100,y:200,radius:20,tip:'You are over 100,200'}, ]; var dx=mouseX-hotspot[0].x; var dy=mouseY-hotspot[0].y; if(dx*dx+dy*dy<hotspot[0].radius*hotspot[0].radius){ // it's over hotspot[0] } Here's example code and a Demo: Note: you don't need to show the circular...

What is difference between fillRect(0,0,0,1) and clearRect()

(Updated to correspond to OPs changes in question:) fillRect() with ctx.fillStyle = "rgba(0, 0, 0, 1)"; will fill the region with opaque pixels, in this case black (note alpha is a normalized value [0,1]). clearRect() does the opposite, "clearing" all pixels so that the bitmap becomes transparent (technically the region...

Spawning multiple Balls in array js

javascript,canvas,setinterval

You've got a lot of syntax errors in your code, that's why it doesn't work: It will work if you remove the animframe() call out of the for loop because that's whats making it only push one ball and stopping the for loop. You have also defined the animframe() function...

How to display button over a Ad Mediator in windows phone 8?

c#,xaml,button,windows-phone-8,canvas

Just embed it in a panel like Grid so it just follows the DOM. Something like (in pseudo); <Grid> <AdMediator/> <Button/> </Grid> ...

Image array won't draw to canvas

It's hard to say exactly where you made a misstake. It seems like ALL your images are added at the same time the first time loadImg is called. In order for your example to draw the images with a delay, you need to put a delay on adding the actual...

which is more performant,

javascript,html5,video,canvas

No, all the cost of decoding a video frame is still there. Using a canvas would in addition to that add more cost, not less. If the video is without sound you could temporary pause the video while scrolling, as well as pause it permanently when out of view: var...

Text in canvas to show in timed sequences using jQuery?

javascript,canvas,fabricjs

There are several issues with this code. As @Jackson suggest, you have used wrong jquery function toggle() instead of toggleClass(). Secondly, your footer has margin-top property set to -700px which cause this element to disappear since your canvas and "No" button in summary have about 400px height. So your footer...

a border where you can not go through (canvas game)

javascript,css,html5,canvas

You need a concept called "clamping". Clamping is limiting a value within a specified range. You want to clamp your ship's horizontal position to be no less than 0 and no greater than the canvas width. You want to clamp your ship's vertical position to be no less than 0...

How to load TIFF image with fabric.js?

This is not really a problem with FabricJS, but more that browsers in general does not support the TIFF file format. IE and Safari being exceptions as well as some less mainstream browsers. Workarounds However, it is possible to read and parse TIFF files manually. To read TIFF you can...

How to calculate X Y coordinates of image when window resize?

javascript,html,canvas

When the canvas element and canvas bitmap has different sizes, you need to use a factor to scale the mouse position to fit relative in the bitmap. This can be done dividing the bitmap size on the element size. Modified fiddle $("#myCanvas").click(function (event) { // get size of element and...

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

javascript,canvas,html5-canvas,automatic-ref-counting,trigonometry

The arc() method works only with angles so points has to be converted based on their location and distance to center (distance, representing the radius, has to be the same for both in this case). The signature of arc() is: void arc(unrestricted double x, unrestricted double y, unrestricted double radius,...

Javascript Canvas clear/ redraw

javascript,jquery,canvas,sketchjs

You need to add a beginPath() in there. rect() will accumulate rectangles to the path, clearRect() won't clear those. Also reset comp. mode and alpha as they are sticky. You could avoid beginPath() if you use fillRect() instead of rect() + fill() (added example below) as fillRect() does not add...

Using destination-over to save background and actual sketch

Assume you have a SketchJS canvas on top of an image containing a background: #wrapper{positon:relative;} #bk,#myCanvas{position:absolute;} <div id='wrapper'> <img crossOrigin='anonymous' id=bk src='yourImage.png'> <canvas id="myCanvas" width=500 height=300></canvas> </div> Then when you want to combine the Sketch with the background and save it as an image you can use destination-over compositing to...

Context.Arc not drawing on specified coordinates

javascript,asp.net,html5,canvas

I managed to figure it out! Instead of drawing circles I drew lines. On mousedown, call moveTo(clientX,clientY) and on mouseMove call lineTo(clientX,clientY) moveTo(clientX,clientY) That way when the user clicks I have the initial position for the line, when he moves, assign the final position and update the initial position. JS:...

Canvas borders c# ( Windows Phone 7)

c#,windows-phone-7,canvas

I`ve fixed this problem. I had just to create another canvas below and set ZIndex to higher paremeter For the bottom Canvas Canvas.ZIndex = 1 For the top Canvas Canvas.ZIndex = 0 Its just about the priority of ZIndex...

Stopping a Canvas Animation setInterval

javascript,ajax,canvas,web-worker

The main issue is with setTimeout and clearTimeout is that they are not used correctly. The code attempts to use a reference to the method to clear the interval whereas it should be a timer reference: clearTimeout(draw); Should be: var timerRef; // global or parent scope function draw() { ......

How to get the value for one function to another?

android,canvas,bitmap,drawable

You could call check(num) inside the setInterval() function with a condition: if(i < 30){ draw(num); i++; } else { check(num); } You should also then end your loop as this will keep running indefinitely. To do this assign the interval to a variable: var myInterval = setInterval(function() { And then...

Android Bitmap on Canvas from External File

How about something like: Bitmap bitmap = BitmapFactory.decodeFile(pathToFile); canvas.drawBitmap(bitmap, ...); ...

slowly animate a simple line

javascript,animation,canvas

That's actually not what you want to do: computers don't do things "slowly", especially not in a context that is single-threaded. What you want to do instead is draw lots of lines, over and over, where each next line is a little longer than the previous one. That way, it...

Continuous gradient along a HTML5 canvas path

canvas,drawing,mobile-safari

You can do a simple approach interpolating two colors along a line. If you need smooth/shared gradients where two lines joins at steeper angles, you would need to calculate and basically implement a line drawing algorithm from (almost) scratch. This would be out of scope for SO, so here is...

Facebook Canvas login - session not created?

php,facebook,canvas

Well, I decided to take a leap of faith, and now things have progressed. I: a) set up a FacebookRedirectLoginHelper at the top of my app b) get the loginUrl from that, using a pointer to my app (mydomain.com/myapp), and present that for authorization c) user clicks on that link,...

HTML, Canvas Path2D alternative.

Path2D is not yet supported in all browsers. You may be able to use a polyfill such as this one to get around this.

HTML canvas breaking when keyboard is shown at landscape orientation

javascript,android,css,html5,canvas

Try using fixed position for it: canvas { position: fixed; left:0; top:0; height: 100%; width: 100%; z-index: -1; /* place in background */ } ...

Detect mouse clicks on circles on HTML5 canvas

javascript,html5,canvas,click,mouseevent

With SVG, it would be easy - a circle is an element, and can have a click handler, and has fill that you can manipulate to change colour. With Canvas, you need to: save the data for each circle you draw (center and radius) capture click on canvas as cx,...

Animating the drawing of a line in the canvas with fabric.js

javascript,canvas,fabricjs

I made a jsFiddle based on http://fabricjs.com/polygon-animation/ and I change it into a fabricjs Polyline. You can set the start and end values from here: var startPoints = [ {x: 1, y: 1}, {x: 2, y: 2} ]; var endPoints = [ {x: 1, y: 1}, {x: 200, y: 200}...

html5 canvas circle palette

javascript,html5,canvas,color-palette

WHAT YEAR IS IT!?!?! Yeah, that took WAY too much effort... But I did it! Just call init(200) and it will make a palette of size 200. It's default is 250 if you don't give it a size. <html> <head> <style> #mainDiv { position: absolute; top: 0px; left: 0px; width:...

Canvas fillRect has wrong X coordinate

javascript,jquery,html,canvas

in the console i am getting the x coordinate as NaN their is no "event.x" you need to do "event.clientX" to get the X coordinate And one more thing you are first definig a var x where the value is stored, next right below it you are running a for...

Canvas element does not resize when using ReactJS and PaperJS together

javascript,html,canvas,reactjs,paperjs

You'll have to use the data-paper-resize prop, since React doesn't recognize the resize prop. <canvas id="myCanvas" data-paper-resize /> See Canvas Configuration and Supported Attributes....

How to move a canvas element up and down for a certain amount of time with javascript

Here, I made a small example of a vibrating guitar string. It waits 2 seconds then strums the string, which vibrates for half a second. The problem you have in your code is that you're adding a time-variable to your clearInterval, which isn't possible. If you want a delay on...

Safari on Mobile blocks window.open [closed]

python,python-3.x,canvas,tkinter

It looks to me like you're calling window.open indirectly, not in direct response to a user event. Most browsers will block those calls (I'm surprised Chrome isn't, but I don't know a lot basically anything about canvas rendering). You may have to break up your logic into two buttons: One...

Cannot change line width in HTML 5 canvas

javascript,jquery,canvas

You are using CSS to set size of the bitmap. That will only apply to the element itself, not the bitmap. The bitmaps' default size is 300x150 which is what you see gets stretched. Set the attributes of the element to affect the bitmap, like: $('<canvas>').attr({ id: boundingBoxId }).attr({ width:...

Is it possible to make the lines move diagonally in tkinter?

Add functions like this one: def p1_move_NE(event): global p1_y,p1_x canvas.create_line(p1_x, p1_y, p1_x + line_length, (p1_y - line_length), width=line_width, fill=p1_colour) p1_x = p1_x + line_length p1_y = p1_y - line_length Then bind it with: window.bind("9", p1_move_NE) My other advices for your program will be to use classes and generic functions like...

Equivalent of canvas quadraticCurveTo in SVG

javascript,jquery,canvas,svg,bezier-curve

It's just a bug in your code. You are not updating lastPoint in your SVG version. http://jsfiddle.net/67haj4nt/4/ And if you update the SVG version to match the canvas version, you get identical curves. http://jsfiddle.net/67haj4nt/5/...

Drawing a tournament bracket in android?

android,canvas,layout

As for question 1, yes you can absolutely change the layout dynamically. You can create several layout files and do one of two things: The first, is you can use your activity's setContentView(int) method to completely reset the activity's layout to a new view. The second would be to identify...

http://sigmajs.org/ les mis tutorial - why are my canvases 0 height?

javascript,html5,canvas,sigma.js

Because your CSS code is false. Replace it with this : #sigma-container { position :absolute; width :500px; height :500px; } ...

Java - Show multiple canvases in container

java,canvas,containers

Container Layout is not set. Set the layout by like: container.setLayout(new GridLayout(1,2)); ...

Fill color for an arc drawed by canvas

html5,canvas

You need to define a continuous path to be able to fill it with a single color if you don't want to use line-width. Using two arcs means you need to "reverse" one of them so their end-points connect correctly without crossing. You can do this by using the counter-close...

How do I clearRect in my JS canvas?

javascript,html5,canvas,html5-canvas

You are missing a beginPath() in the code to clear the path. This will cause all rectangles to be redraw each time (and will eventually slow down the whole process). var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var angle = 0; setInterval(function() { angle++; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.save();...

Pass an image to a canvas with dataurl

html5,canvas,data-url

The reason nothing shows is that the provided Data-URI contains no data, that is, it is 300x150 fully transparent: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAAxUlEQVR4nO3BMQEAAADCoPVPbQhfoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOA1v9QAATX68/0AAAAASUVORK5CYII= My guess is that you along the way saved an empty...

HTML 5 Canvas addHitRegion not working on iOS (undefined is not a function)

javascript,ios,html5,canvas

Currently the support for addHitRegion() is pretty slim on mobile devices. According to MDN, these devices are the only one supporting it at the moment of this writing (disclaimer: it's not certain MDN is entirely up to date; caniuse.com does not report any on this method): The situation is a...

HTML5 Canvas Base64 Error [closed]

javascript,html,canvas,base64

You gave imgObj1 time to load with imgObj1.onload, but you must also give img time to load by adding img.onload https://jsfiddle.net/m1erickson/tf0y1pL9/ BTW, errors are easier to spot if you format your code. ;-) var can = document.getElementById('canvas1'); var ctx = can.getContext('2d'); // create and load the first image var imgObj1...

Create a cone with shadows

javascript,html5,canvas,viewport

There is unfortunately no gradient type in canvas which allow you to specify a radiant gradient. You have to provide a mechanism to do so manually. You could use a shadow approach drawing the object off-screen while offsetting the shadow so it overlapped the cone base. One for light and...

I want to make a viewport for a canvas game

Try storing the view port in a variable. var view = {x: 0, y: 0}; Then, at the beginning of your draw loop / render function, save the canvas state and translate to the view port. ctx.save(); ctx.translate(view.x, view.y); If you want view.x and view.y to represent the center of...

Add metadata (Exif) to base64

javascript,canvas,upload,exif

There is no easy way to do this. Canvas will only save out the JPEG file, then encode it as either a Data-URL or a Blob depending on the method you chose with the most basic chunks. There is no mechanism to insert custom or additional chunks into the file...

Randomly appearing text in html page

javascript,html5,css3,canvas,html5-canvas

Here's one way to animate words into a final sentence: https://jsfiddle.net/m1erickson/q7tpsnmv/ Define some word objects in an array: var words=[]; words.push({ text:'Welcome', // starting x,y of the word offscreen x0:Math.random()*cw, y0:(Math.random()*100)+ch, // ending position of the word onscreen x1:20, y1:50, // font-size size:10, // delay before starting to animate this...

How to scale an image down to fit inside a canvas, without distorting the image?

html5,canvas,fabricjs

1) Determine which dimension is the one which exceeds the size of the window you want to put the image in. If both exceed the size calculate both factors and use the largest: width_factor = imagewidth / allowable_width height_factor = imageheight / allowable_height 2) Scale both the height and the...

How to make a Javafx Image Crop App

java,image,canvas,graphics,javafx

Your question is too much to be answered on StackOverflow. I suggest you start with reading the official Oracle documentation about JavaFX. However, since it's an interesting topic, here's the answer in code. There are several things you need to consider: use an ImageView as container use a ScrollPane in...

Converting Text view to bitmap returns null

java,android,canvas,bitmap,textview

You did not add the text view to the the screen. Once you add it, the view height and width will be calculated for rendering and then only view will be drawn and you can get the bitmap out of it. Do the three things, Add the textview to the...

How does the browser process image sources?