Skip to main content

Posts

Showing posts with the label html5

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

how to create vertical table heading text with html5 canvas?

Does anyone know if it's possible to create vertical text in a html5 canvas and then have the canvas resize to the content? I've seen posts about adding text and rotating it but don't know how to have the canvas resize automatically to it afterwards. Here is a link to a page with one of the tables: here I basically want to replace the top headings with vertical text in different canvases. The team names need to be dynamic and I'd rather not have them generated as jpg's. Thanks!

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

viewport scale doesn't work after orientation change

I use the following function to rescale my viewport on iPad: function rescale(scale){ var headElements = document.getElementsByTagName("meta"); for(var i = 0; i< headElements.length; i++){ var theElement = headElements[i]; if(theElement.name == "viewport"){ theElement.content = "width=device-width, user-scalable=no, initial-scale=" + scale + ", maximum-scale=" + scale + ";"; } } } This works an unlimited number of times (in either portrait or landscape orientation), until I change the orientation of the device, when it ceases to work until i reload the page. Is this a bug in iOS, or are there any workarounds?

how to create vertical table heading text with html5 canvas?

Does anyone know if it's possible to create vertical text in a html5 canvas and then have the canvas resize to the content? I've seen posts about adding text and rotating it but don't know how to have the canvas resize automatically to it afterwards. Here is a link to a page with one of the tables: here I basically want to replace the top headings with vertical text in different canvases. The team names need to be dynamic and I'd rather not have them generated as jpg's. Thanks!