html5-canvas


How can I set Html5 Canvas FillStyle with dynamic pattern and color


I would like to set dynamically a color and pattern to a shape using html5 canvas. The pattern is a .png image. When I research the topic I found that you can not mix fillStyle = pattern and fillStyle = color The canvas shape will get only one of them. I would like to have a color in the background and image pattern in the forward dynamically. That is possible?
any idea will be appreciate.
Just draw the circular path twice:
First time with the solid lime fill
Second time with the pattern
Example code and a Demo:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;
var img = new Image();
img.onload = start;
img.src = "https://dl.dropboxusercontent.com/u/139992952/multple/star.png";
function start() {
ctx.beginPath();
ctx.arc(150, 150, 130, 0, Math.PI * 2);
ctx.closePath();
ctx.fillStyle = 'lime';
ctx.fill();
var pattern = ctx.createPattern(img, 'repeat');
ctx.fillStyle = pattern;
ctx.fill();
}
body {
background-color: ivory;
}
canvas {
border: 1px solid red;
}
<canvas id="canvas" width=300 height=300></canvas>

Related Links

3d Models Augmented Reality Javascript (js-aruco)
Draggable element in KineticJS that is “under” another?
Three.JS - DAE Animation Without Skins
How to use Flot canvas plugin
canvas issue on chrome mobile
paint application with kinetic js
HTML5 Canvas API
How to add subscript and superscript text in kinetic text
Tween after dragging doesn't start to the drag-end position (with KineticJS)
How to Get Display Object width using createjs framework in html5
try google webfonts on html5 canvas every method: standard, #import, javascript and webfont loader, neither work
drawImage() on canvas saturates colors and messes up alpha
Creating a fadeIn effect
set offset/position of polygon to rotate
How to rotate an image x degrees then move in that direction?
Which HTML5 canvas game library has hover support?

Categories

HOME
ios
azure
music
xaml
direction
apache-pig
blogs
apacheds
addeventlistener
android-bluetooth
entity
add-in
openframeworks
pymc3
eloqua
command-line-interface
coreos
python-2.5
partitioning
apache-kafka-streams
spring-cloud-consul
next
atmelstudio
javers
thrift
rational
smartcard
ghost-blog
accelerated-mobile-page
c-strings
mouseevent
slf4j
padding
azure-redis-cache
regex-group
laravel-valet
clappr
sqlite.swift
imageshack
seh
ose
spring-websocket
advanced-installer
jdom-2
increment
cookiestore
atlassian-bitbucketserver
mindstorms
csr
logicblox
qmake
tabview
sweet.js
free-diameter
gretl
gulp-babel
default-browser
sharpziplib
replaygain
fasta
liclipse
breach-attack
zenity
error-correction
perspective
hapi.js
webtrends
hyperterm
pygments
webclient-download
file-management
webdeploy-3.5
activemodel
mars
vimeo-ios
flexigrid
greenfoot
oracle-bi
openejb
hypervisor
avalonedit
abort
newsql
mysql5
gdk
jet.com-apis
mouseenter
asp.net-apicontroller
sshj
nmea
arbtt
sizzle
datadesign
asp.net-session
expression-encoder-sdk
magento-1.5
demoscene
facebook-authentication
indextank
resharper-4.5
development-machine
metaphone

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App