Working Example

For me, there are many times where I need to get at the x, y or z value of a -webkit-transform: translate3d({x}, {y}, {z}) property.

I had originally written the below method using .style.webkitTransform and then doing some fancy manipulations to extract out the x, y or z values from the style. However, you will find that elements will not have webkitTransform applied as a “style” to them when it is being set from a css class.

Therefore, I rewrote the method to use getComputedStyle and using its return value for ‘-webkit-transform’.

The interesting thing about this is that it returns a string representation of a WebKitCSSMatrix. Now I had to figure out how to get at the values of x, y and z from this structure.

With some trial and error, I found the following property correspondence:

.m41 – corresponds to the ‘x’ value of a WebKitCSSMatrix
.m42 – corresponds to the ‘y’ value of a WebKitCSSMatrix
.m43 – corresponds to the ‘z’ value of a WebKitCSSMatrix

Here is the main extractedWebkitTranslate3DProperty method, followed by its helper method getStyle:

A perennial problem with HTML is correctly dealing with ellipsis on text. There is the text-overflow:ellipsis trick, but there are some situations where you need to ellipse a string at a certain number of pixels.

I think I have come up with a pretty clever solution to this.
By adding a prototype to the String Object and using a dynamically generated <canvas> tag, we can accurately measure the width of a string based on a provided font and fontSize, adding ellipsis as necessary.

UPDATE

I was asked by an associate if there was a way to retain the original value of the string before it was ellipsed. In answer to that, I added the lines in red.Now there is a property called “.originalValue” added to each string that has been ellipsed.

This technique allows you to composite a green-screen video over a web page.
The basic setup consists of a hidden <VIDEO> tag, another hidden <CANVAS> tag, where each frame of video is captured for further processing and a visible <CANVAS> tag where each processed frame is displayed.
When a frame of video is captured and placed into our “canvasProcessor”, each pixel is analyzed in turn. A pixel is represented by a CanvasPixelArray consisting of four values: (R)ed, (G)reen, (B)lue and (A)lpha.
When we find a pixel that fits in the range of “green”, we change that one to have a 0 (A)lpha value (and thus it becomes invisible).

Note - For the video I've used here, I had to play with the values a bit to find just the right range of values that mean "green." Also, the source video was rotated -90deg, so I had to apply a webkit-transform to it. To see how everything works, just comment out the display:none CSS.

There is no way built-in way to draw dashed lines using <canvas>.
Therefore, I came up with a prototype method that hangs off of the CanvasRenderingContext2D Object that I am calling “dashedLineFromTo”

As you may expect, it simply draws a bit of a line, then skips a bit and draws more until it is done “connecting the dots” between point A and B.

My particular application involves generating a line graph with dashed lines.
This is, in effect, a series of dashed lines and adds a slight nuance inasmuch as when one dashed line is completed and another picks up where it left off, we must keep track of if the previous line ended in a lineTo (ie drawn pixels) or a moveTo (ie just moving the drawing cursor) and, with the new line segment, begin it with a lineTo or a moveTo to “finish off” the pixels that were left unpainted in the previous segment.

Our Mission

Render Corporation, founded in 1997, specializes in providing top Web Development talent to some of the most dynamic brands in the world.
We are experts in HTML/HTML5, CSS/CSS3 and Javascript, boasting a client list that includes nearly all of the top names in Silicon Valley.
Chances are, if you are a Javascript developer, you are already using code we developed.
We are actively seeking new clients, so if you require the best, contact us.