Как рисовать полупрозрачный лини на Canvas без наложения цвета?

Question

[Никита Гавриков]

Всем привет у меня тут образовалась проблема.
Я делаю небольшую рисовалку и по заданию нужно чтобы можно было на канве рисовать линии с разным уровнем прозрачности.
Вот тут пример такой рисовалки:
https://jsfiddle.net/08cw6mh7/

проблема следующая: если рисовать поставить цвет заливки например rgba (50, 100, 150, 1) то все работает хорошо так как прозрачность 1. И при перемещении мыши, цвета хоть и накладываются друг на друга, но за счет полной непрозрачности это не заметно. Но если начать изменять прозрачность например rgba (50, 100, 150, .25) то начинается треш - цвета начинают накладываться и получается не равномерно-прозрачная линя а непонятно что. Что можно сделать?

Comments

[copal]

но ведь так и должно быть.

[Никита Гавриков]

copal: всмысле как?

[copal]

Никита Гавриков: ааа. Вы имеете ввиду что линия получается из кружочков что не соответствует просто линии? Ну тогда, скорее всего выход только один, создать ещё канвас и задать ему прозрачность, а рисовать без прозрачности. То есть не просто можно, а нужно! Ведь в любой рисовалке должен быть откат нарисованного. А со слоями Вы раз и сделали рендер без последнего. То есть каждый раз новый канвас создавать. Это самое простое.

[Никита Гавриков]

copal: Честно я даже не думал что нужно будет в условии писать) мне нужно сделать так чтобы рисовалось именно на одной канве, потому что человек может нарисовать 1000 линий и это будут и это будет треш) + даже если бы это было бы 2 канвы то рендерится они будут так что пересечение их будет темнее чем их цвет - возможно тут как-то хитро нужно использовать метод ctx.globalCompositeOperation но я еще не придумал как

[copal]

Никита Гавриков: ну раз Вы хотите хитро, то я уверен что найдете способ. Просто аргумент "а что если триллиард линий" не аргумент! Вам же не нужно все их хранить... Сделайте откат на максимум на три рисования и создавайте всего три канваса. Если кто-то зачет больше, то путь расплачивается оперативой, как в фотошопе. Просто если даже найдете способ рисования линии, то как Вы сделаете откат нарисованного? ИлиВы хотите чтобы Ваши пользователи в окна выпрыгивали когда у них после часа рисования рука дрогнет?

[Никита Гавриков]

copal: У меня откат настроен) Т.е. нарисовал какуюнибудь линию она у меня сохраняется в историю. Но если если я буду фиксировать каждое перемещение зажатой мыши на 1 px. Я как раз таки и расплачусь оперативкой. Тут же проблема не в том что после того как ты нарисовал линии их общие части темнеют, а втом что пока ты рисуешь одну линию круг нарисованный из каждого последущего пикселя накладывается на предыдущий

[copal]

Никита Гавриков: в какую историю? Каждый пиксель заносите в массив и если что то потом удаляете?
Можете тогда попробовать прозрачность оставлять на полную, но цвет рассчитывать так, как будто он прозрачный.

[Никита Гавриков]

copal: История действий! Нет я после события маусап заношу получившуюся линию в историю! При полной непрозрачности нет необходимости фиксировать каждый пиксель

Answer 1

[GreatRash]

https://jsfiddle.net/goqzdsxu/

Comments

[Никита Гавриков]

Идрить колотить))) Спасибо огромное - идеальное решение