Skip to main content

Posts

Showing posts with the label canvas

Html5 Canvas vs SVG vs div

What is the best way for element creation on the fly and being able to move it around? Let's say I want to create rectangle, circle and polygon then I want to select the objects and move it around And how is the performance of those three while in use for showing a web page? Let's say I want to create three visually identical web page and have header, footer, widget and text content in them. The first one is created using full canvas, the second is created using svg, and the third is created using plain div html and css. Thanks in advance Source: Tips4all

Creating heatmaps using <canvas> element?

Are there any JavaScript libraries out there that allow you to create heatmaps using in-browser graphic rendering features such as <canvas> or SVG? I know about HeatMapAPI.com, but their heat maps are generated on the server side. I think that in the era of <canvas> element we don't need that anymore! If there is nothing like this yet, are there any volunteers to participate in creating such a tool? Source: Tips4all

HTML5 JavaScript canvas animation class method called within function

I am having trouble drawing an animation on a HTML 5 canvas inside a loop. I have created a javascript animation function/class that stores frames and duration information and provides a get function to getFrame()[returns image] sub-function to retrieve the relevant frame. This works perfectly fine so i haven't included the full script. If anyone wants or needs it i will send to you. When i call the following code it displays the animation as intended. canvas.drawImage(tile1a.getFrame(),50,60); canvas.drawImage(tile1a.getFrame(),50,90); canvas.drawImage(tile1a.getFrame(),50,120); //etc This isn't very efficient as i want to draw a lot of tiles is column so it would be better to use a for loop. Therefore i tried the following code but the page just keeps crashing. for (i=1;i<=10;i++) { canvas.drawImage(tile1a.getFrame(),FIELD_WIDTH,i*30); } However, i then tried the following which worked: var temp = tile1a.getFrame(); for (i=1;i<=10;i++) {

Hot to work around Canvas.clipPath() that is not supported in android any more

From android 3.0 the clipPath() method is no longer supported in devices with hardware acceleration turned on.(Read this article for more details). I am working with canvas and I need to draw rounded image. Any ideas about how can I do that? *I can't turn the hardware acceleration off, I am looking for other solution. Answered: Tnx @Malcolm for your answer. I found a good example that demonstrate this technique , it's basically a mask.

Html5 canvas and jquery

I have created a triangle using canvas but i was wondering if there was a way to change the fillStyle color on mouseover as if it were a div and jquery. var context = document.getElementById("canvasId").getContext("2d"); var width = 150; var height = 105; context.beginPath(); context.moveTo(75, 0); context.lineTo(150, 105); context.lineTo(0, 105); context.closePath(); context.fillStyle = "#ffc821"; context.fill(); Thank you for the support

Image manipulation in canvas

I have a number of images within #mycontainer like: <div id="mycontainer"> <img src="http://localhost:8080/images/my-image.png" /> … </div> I need to convert those into B/W. Pretty common task but I didn't find any solution for this that would just work for me — there is some problem with the actions execution. What I have now is the following: function grayscale(src) { var ctx = document.createElement('canvas').getContext('2d'), imgObj = new Image(), pixels, i, n, gs, url; // wait until the image has been loaded imgObj.onload = function () { ctx.canvas.width = this.width; ctx.canvas.height = this.height; ctx.drawImage(this, 0, 0); pixels = ctx.getImageData(0, 0, this.width, this.height); for (i = 0, n = pixels.data.length; i < n; i += 4) { gs = pixels.data[i] * 0.3 + pixels.data[i+1] * 0.59 + pixels.data[i+2] * 0.11; pixe

Canvas Coordinates have offset

I just started with fabric.js and I have a (probably beginner) error: I am using fabric with jquery with the following code: $(document).ready(function () { canvas = new fabric.StaticCanvas('scroller'); canvas.add( new fabric.Rect({ top: 0, left: 0, width: 140, height: 100, fill: '#f55' }) ); }); This code should draw a 140x100 Rectangle on the canvas. Sadly, only a quarter of the Rectangle appears. If I change the top and left values to higher numbers, more of the Rectangle appears on the canvas. So it seems, that the canvas origin is not at 0/0, but at sth. higher. Does someone know how to fix this or what I am doing wrong? Thanks in advance, McFarlane