0

I need to draw a custom shape and fill it with a solid colour or a pattern. I have already achieved the shape and been able to change the fill colour with a 2d html5 canvas and javascript.

However I abandoned the canvas approach as it's a web app for phones and I found have several canvases on one page ran really slowly on older phones in particular.

Can anyone advise on an alternative approach that would work, keeping in mind speed is important? I have been considering:

Drawing with css, but it seems like a lot of markup and messing around to create a relatively simple shape.

SVG - didn't know this existed until last night. This example http://www.w3schools.com/svg/tryit.asp?filename=trysvg_polygon4 seems a lot like canvas, does it have any performance implications?

Overlay some sort of webkit css mask, like this http://www.webkit.org/blog/181/css-masks/ but with a background colour or pattern. Seems like it might be problematic if the page has a background image not a solid colour.

Apologies for the long winded post, I just don't know the best approach to this after canvas proved to be out of the question. I would love to be pointed in the right direction.

Thanks

mao
  • 1,059
  • 2
  • 23
  • 43
  • http://stackoverflow.com/questions/3889882/svg-support-on-android A quick google seems to suggest that SVG is not the way to go on older Android devices. – Johan Dec 07 '11 at 12:43
  • damn, bad news but important to know – mao Dec 07 '11 at 12:45

2 Answers2

1

Check out Raphaël, it's based on SVG and is supported by the following browsers:

  • Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.

http://raphaeljs.com/

c4urself
  • 4,207
  • 21
  • 32
  • Thanks, that does look very useful. But as johan has pointed out svg isn't supported on a lot of android versions, I just tried on my android phone. I just assumed it would be supported. – mao Dec 07 '11 at 13:02
1

With SVG you can use CSS to style the fill, which makes it really easy to set the fill to either a pattern or a solid color.

Here's an example of patterns in svg.

Erik Dahlström
  • 59,452
  • 12
  • 120
  • 139
  • svg is ideal, shame about the support on android – mao Dec 08 '11 at 12:30
  • I saw that someone modified SVG Web (a shim that renders svg with flash) that works on old Androids, as long as the flash plugin is installed. See http://groups.google.com/group/svg-web/browse_thread/thread/77fb6970f5f01e97. – Erik Dahlström Dec 08 '11 at 12:35
  • thanks for that, I'll give it a try and see what the performance is like – mao Dec 08 '11 at 12:50