Archives for category: HTML5

I was playing with the HTML5 Canvas element trying to allow client side zooming/panning/rotating of an image.  I finally figured out an implementation that will accommodate the zooming and I am still working on the panning/rotating pieces of the functionality.  I use a SELECT element to act as the scale (Zoom) for the image.  Even though it is not present in the code snippet below, I use a Generic Handler to populate my ASP.NET Image control.  The HTML5 canvas uses the ASP.NET Image control as the source of the image and then I can use JavaScript and the Canvas element to manipulate the image on the client side.

The HTML:

Zoom:
<select id="ZoomSelect" onchange="drawpicture();">
   <option id="Zoom50" value=".5">50%</option>
   <option id="Zoom75" value=".75">75%</option>
   <option id="Zoom100" value="1" selected="selected">100%</option>
   <option id="Zoom125" value="1.25">125%</option>
   <option id="Zoom150" value="1.5">150%</option>
   <option id="Zoom175" value="1.75">175%</option>
   <option id="Zoom200" value="2">200%</option>
</select>
<canvas id="viewer"></canvas>
<asp:Image ID="imgViewer" runat="server" style="display:none;" />

The JavaScript:

window.onload = function () {
   drawpicture();
};

function drawpicture() {
   var canvas = document.getElementById("viewer");
   var context = canvas.getContext("2d");
   var imageObj = document.getElementById('<%= imgViewer.ClientID %>');
   var scale = $('#ZoomSelect option:selected').val();
   context.clearRect(0, 0, 3000, 3000); // clear canvas for re-draw
   context.canvas.width = imageObj.width * scale;
   context.canvas.height = imageObj.height * scale;
   context.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height, 0, 0, imageObj.width * scale, imageObj.height * scale);
}
Advertisements

I’m working on a HTML5 web site and need a way to have borders on the TD tags without using the cellpadding and cellspacing attributes like I usually implement.  After some googling I found a solution here.  The answer does not mention HTML5 specifically but it worked like a charm.

table
{
 border-spacing: 0px;
 border-collapse: collapse;
}