Multi-color Text using globalCompositeOperation

Developer
Dave DeHaan
Size
1,983 Kb
Views
10,120
  1. Multi-color Text using globalCompositeOperation Previews
  2. Multi-color Text using globalCompositeOperation HTML Codes
  3. Multi-color Text using globalCompositeOperation CSS Codes
  4. Multi-color Text using globalCompositeOperation JS Codes

How do I make an multi-color text using globalcompositeoperation?

Animated mulit-color text using globalCompositeOperation. What is a multi-color text using globalcompositeoperation? How do you make a multi-color text using globalcompositeoperation? This script and codes were developed by Dave DeHaan on 04 January 2023, Wednesday.

Multi-color Text using globalCompositeOperation Previews
IQ Test

Multi-color Text using globalCompositeOperation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Multi-color Text using globalCompositeOperation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <center> <canvas id="draw" height="300" width="300"></canvas>
</center> <script src="js/index.js"></script>
</body>
</html>

Multi-color Text using globalCompositeOperation - Script Codes CSS Codes

canvas { background: #000;
}
body { background: #000; margin: 0px;
}

Multi-color Text using globalCompositeOperation - Script Codes JS Codes

/* START CONFIG VARS */
var displayText = 'hello world';
var textColor = '#FFF';
var textStyle = '40px Arial';
var circleColor = '#ACE';
var positionRadius = 30;
var animSpeed = 4;
/* END CONFIG VARS */
var c=document.getElementById("draw");
var ctx=c.getContext("2d");
var frame = 0;
setInterval(function() {	frame++;	c.width = 300;	ctx.beginPath(); ctx.fillStyle = textColor; ctx.font = textStyle;	ctx.fillText(displayText, 60, 140);	ctx.globalCompositeOperation = 'xor';	ctx.fillStyle = circleColor;	shiftX = Math.sin(frame / (360 / animSpeed) * Math.PI) * positionRadius;	shiftY = Math.cos(frame / (360 / animSpeed) * Math.PI) * positionRadius;	ctx.beginPath();	ctx.arc(150 + shiftX, 130 + shiftY, 50, 0, 2*Math.PI);	ctx.fill();	ctx.beginPath();	ctx.arc(150 - shiftX, 130 - shiftY, 50, 0, 2*Math.PI);	ctx.fill();
}, 1000/60);
Multi-color Text using globalCompositeOperation - Script Codes
Multi-color Text using globalCompositeOperation - Script Codes
Home Page Home
Developer Dave DeHaan
Username davedehaan
Uploaded January 04, 2023
Rating 3
Size 1,983 Kb
Views 10,120
Do you need developer help for Multi-color Text using globalCompositeOperation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Dave DeHaan (davedehaan) Script Codes
Name
404 Glitch Effect
More Fun with Lines
Merry Christmas.
Tween Bubbles.
Unblur on Page Load
A Pen by Dave DeHaan
Christmas Countdown
Fun with Lines
HTML5 Logo Tracing
Yule Logs
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!