How to print pattern like this using canvas tag (using JavaScript) . Pls help me. | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
0

How to print pattern like this using canvas tag (using JavaScript) . Pls help me.

* ** *** ****

3rd Jul 2020, 2:24 AM
Krishna Teja
Krishna Teja - avatar
4 Answers
+ 1
Krishna Teja , but why do you need to use the canvas tag to do this? And if you really want it, then try to use fillText or strokeText, along with a prompt input (or however you would like to take input) for the number of lines to print and use logic to print the pattern! I'll soon share an example code...
3rd Jul 2020, 2:44 AM
SSki11
SSki11 - avatar
0
Here is the code solution: https://code.sololearn.com/WTPWgW7oAY03/?ref=app Note that in canvas' fillText or strokeText, you cannot use the new line character '\n'. So what I did is that I configured the for loop in such a manner so as to increase the y-coordinate of the text box for each new line by 20. In this way, every pair of adjacent lines has a gap of almost 20, which appears like a new line.
3rd Jul 2020, 3:41 AM
SSki11
SSki11 - avatar
0
Santanu Sikder [DM glitched] yes!! ctx.fillText(pattern, 100, 100 + i * 20) This is the part in ur code , which iam missing. Thank u so much :)
3rd Jul 2020, 1:30 PM
Krishna Teja
Krishna Teja - avatar
0
𝐊𝐢𝐢𝐛𝐨 𝐆𝐡𝐚𝐲𝐚𝐥 Actually i missed that logic to increase y coordinates over there. thank u so much for ur suggestions
3rd Jul 2020, 1:34 PM
Krishna Teja
Krishna Teja - avatar