CSS Canvas Drawings

Method of using HTML5 Canvas as a background image. Not currently part of any specification.

Spec	https://webkit.org/blog/176/css-canvas-drawing/
Status	Unofficial / Note

IE	Edge	Firefox	Chrome	Safari	Opera
		147	144
		146	143	TP (*)
		145	142	26.1 (*)
11	141	144	141	26.0 (*)	122
10	140	143	140	18.5-18.6 (*)	121
9	139	142	139	18.4 (*)	120
8	138	141	138	18.3 (*)	119
Show all
7	137	140	137	18.2 (*)	118
6	136	139	136	18.1 (*)	117
5.5	135	138	135	18.0 (*)	116
	134	137	134	17.6 (*)	115
	133	136	133	17.5 (*)	114
	132	135	132	17.4 (*)	113
	131	134	131	17.3 (*)	112
	130	133	130	17.2 (*)	111
	129	132	129	17.1 (*)	110
	128	131	128	17.0 (*)	109
	127	130	127	16.6 (*)	108
	126	129	126	16.5 (*)	107
	125	128	125	16.4 (*)	106
	124	127	124	16.3 (*)	105
	123	126	123	16.2 (*)	104
	122	125	122	16.1 (*)	103
	121	124	121	16.0 (*)	102
	120	123	120	15.6 (*)	101
	119	122	119	15.5 (*)	100
	118	121	118	15.4 (*)	99
	117	120	117	15.2-15.3 (*)	98
	116	119	116	15.1 (*)	97
	115	118	115	15 (*)	96
	114	117	114	14.1 (*)	95
	113	116	113	14 (*)	94
	112	115	112	13.1 (*)	93
	111	114	111	13 (*)	92
	110	113	110	12.1 (*)	91
	109	112	109	12 (*)	90
	108	111	108	11.1 (*)	89
	107	110	107	11 (*)	88
	106	109	106	10.1 (*)	87
	105	108	105	10 (*)	86
	104	107	104	9.1 (*)	85
	103	106	103	9 (*)	84
	102	105	102	8 (*)	83
	101	104	101	7.1 (*)	82
	100	103	100	7 (*)	81
	99	102	99	6.1 (*)	80
	98	101	98	6 (*)	79
	97	100	97	5.1 (*)	78
	96	99	96	5 (*)	77
	95	98	95	4 (*)	76
	94	97	94	3.2	75
	93	96	93	3.1	74
	92	95	92		73
	91	94	91		72
	90	93	90		71
	89	92	89		70
	88	91	88		69
	87	90	87		68
	86	89	86		67
	85	88	85		66
	84	87	84		65
	83	86	83		64
	81	85	81		63
	80	84	80		62
	79	83	79		60
	18	82	78		58
	17	81	77		57
	16	80	76		56
	15	79	75		55
	14	78	74		54
	13	77	73		53
	12	76	72		52
		75	71		51
		74	70		50
		73	69		49
		72	68		48
		71	67		47
		70	66		46
		69	65		45
		68	64		44
		67	63		43
		66	62		42
		65	61		41
		64	60		40
		63	59		39
		62	58		38
		61	57		37
		60	56		36
		59	55		35
		58	54		34 (*)
		57	53		33 (*)
		56	52		32 (*)
		55	51		31 (*)
		54	50		30 (*)
		53	49		29 (*)
		52	48		28 (*)
		51	47 (*)		27 (*)
		50	46 (*)		26 (*)
		49	45 (*)		25 (*)
		48	44 (*)		24 (*)
		47	43 (*)		23 (*)
		46	42 (*)		22 (*)
		45	41 (*)		21 (*)
		44	40 (*)		20 (*)
		43	39 (*)		19 (*)
		42	38 (*)		18 (*)
		41	37 (*)		17 (*)
		40	36 (*)		16 (*)
		39	35 (*)		15 (*)
		38	34 (*)		12.1
		37	33 (*)		12
		36	32 (*)		11.6
		35	31 (*)		11.5
		34	30 (*)		11.1
		33	29 (*)		11
		32	28 (*)		10.6
		31	27 (*)		10.5
		30	26 (*)		10.0-10.1
		29	25 (*)		9.5-9.6
		28	24 (*)		9
		27	23 (*)
		26	22 (*)
		25	21 (*)
		24	20 (*)
		23	19 (*)
		22	18 (*)
		21	17 (*)
		20	16 (*)
		19	15 (*)
		18	14 (*)
		17	13 (*)
		16	12 (*)
		15	11 (*)
		14	10 (*)
		13	9 (*)
		12	8 (*)
		11	7 (*)
		10	6 (*)
		9	5 (*)
		8	4 (*)
		7
		6
		5
		4
		3.6
		3.5
		3
		2

Safari on iOS	Opera Mini	Android Browser	Blackberry Browser	Opera Mobile	Android Chrome	Android Firefox	IE Mobile	Android UC Browser	Samsung Internet	QQ Browser	Baidu Browser	KaiOS Browser
26.1 (*)
26.0 (*)	all	141	10 (*)	80	141	143	11	15.5	28	14.9	13.52	3.0-3.1
18.5-18.6 (*)		4.4.3-4.4.4 (*)	7 (*)	12.1			10		27			2.5
18.4 (*)		4.4 (*)		12					26
18.3 (*)		4.2-4.3 (*)		11.5					25
Show all
18.2 (*)		4.1 (*)		11.1					24
18.1 (*)		4 (*)		11					23
18.0 (*)		3 (*)		10					22
17.6-17.7 (*)		2.3 (*)							21
17.5 (*)		2.2 (*)							20
17.4 (*)		2.1 (*)							19.0
17.3 (*)									18.0
17.2 (*)									17.0
17.1 (*)									16.0
17.0 (*)									15.0
16.6-16.7 (*)									14.0
16.5 (*)									13.0
16.4 (*)									12.0
16.3 (*)									11.1-11.2
16.2 (*)									10.1
16.1 (*)									9.2
16.0 (*)									8.2
15.6-15.8 (*)									7.2-7.4
15.5 (*)									6.2-6.4
15.4 (*)									5.0-5.4
15.2-15.3 (*)									4 (*)
15.0-15.1 (*)
14.5-14.8 (*)
14.0-14.4 (*)
13.4-13.7 (*)
13.3 (*)
13.2 (*)
13.0-13.1 (*)
12.2-12.5 (*)
12.0-12.1 (*)
11.3-11.4 (*)
11.0-11.2 (*)
10.3 (*)
10.0-10.2 (*)
9.3 (*)
9.0-9.2 (*)
8.1-8.4 (*)
8 (*)
7.0-7.1 (*)
6.0-6.1 (*)
5.0-5.1 (*)
4.2-4.3 (*)
4.0-4.1 (*)
3.2 (*)

Notes

A similar effect can be achieved in Firefox 4+ using the -moz-element() background property

^* Partial support with prefix.

Resources

• WebKit blog post